angularJs的学习笔记

angularJs的学习笔记,记录一下,额外学习,不用到项目中,怕以后忘了。

参考地址:http://www.ituring.com.cn/article/13473  改地址比较老了  建议多看看评论  英文好的可以看看这个 https://docs.angularjs.org/tutorial

1.搭建学习环境

本人用的Mac mini,根据参考地址学习angularJS,需要安装node和Testacular

a.安装node

终端中:

git clone git://github.com/joyent/node.git
cd node
./configure
make
sudo make install

安装成功

dzuketomoheitekiMac-mini:node fuyouping$ node --version
v0.13.0-pre

然后安装Testacular单元测试程序,请运行如下命令:testacular也改名karma了,npm install -g testacular应该改为 npm install karma

npm install karma

安装Git工具,然后用以下命令从Github复制本教程项目的源代码文件

git clone git://github.com/angular/angular-phonecat.git

哎  那个地址是个坑  我删除重新来  rm -rf angularJS

1.下载angular-phonecat

git clone --depth=14 https://github.com/angular/angular-phonecat.git
The --depth=14 option just tells Git to pull down only the last 14 commits. This makes the download much smaller and faster. 意思大概是  获取最后14次的提交 这样下载更快文件更小

进入angular-phonecat

cd angular-phonecat/

2.安装node,上面已经有了

node --version  或者  node -v  查看node的版本   这里更方便
apt-get install nodejs-legacy npm

如果没安装npm 使用 install npm

3.运行 npm start   然后再浏览器访问

http://localhost:8000/app/index.html

新手学习,很多地方有错,谢谢。

时间: 2024-10-11 16:29:56

angularJs的学习笔记的相关文章

AngularJS入门学习笔记一

首先声明: 本博客源自于学习:跟我学AngularJs:AngularJs入门及第一个实例.通过学习,我自己的一些学习笔记. 1.AngularJS的一些基本特性 (1)使用双大括号{{}}语法进行数据绑定: (2)使用DOM控制结构来实现迭代或者隐藏DOM片段: (3)支持表单和表单的验证: (4)能将逻辑代码关联到相关的DOM元素上: (5)能将HTML分组成可重用的组件. 他是MVC结构的,有双向数据绑定的特点.下图是双向数据绑定的图解: 使用DOM作为输入,而不是字符串,是Angular

AngularJS的学习笔记(一)

声明:单纯作为我自己的学习笔记,纯是为了自己学习,上面的话都是从各处粘贴,如有冒犯,请原谅我这个小菜鸟~ AngularJS使用了不同的方法,它尝试去补足HTML本身在构建应用方面的缺陷. 使用双大括号{{}}语法进行数据绑定: 使用DOM控制结构来实现迭代或者隐藏DOM片段: 支持表单和表单的验证: 能将逻辑代码关联到相关的DOM元素上: 能将HTML分组成可重用的组件. AngularJS主要考虑的是构建CRUD应用.(增加Create.查询Retrieve.更新Update.删除Delet

AngularJS的学习笔记(二)

只给自己看的. AngularJS 表达式 angularjs 使用表达式将数据绑定到html中. AngularJS 表达式写在双大括号内:{{ expression }}. AngularJS 表达式把数据绑定到 HTML,这与 ng-bind 指令有异曲同工之妙. AngularJS 将在表达式书写的位置"输出"数据. AngularJS 表达式 很像 JavaScript 表达式:它们可以包含文字.运算符和变量 数字:{{5*5}}和ng-bind="5*5"

Angularjs 路由学习笔记

从官网下载了最新版本的Angularjs 版本号:1.3.15 做一个简单的路由功能demo 首页:index.html 1 <!DOCTYPE html > 2 3 <html> 4 <head> 5 <meta charset="utf-8" /> 6 <title>测试</title> 7 <script src="./js/angular.min.js"></scrip

AngularJS第一次学习笔记

------------ ---------- ------ ---- --- ---

angularJs的学习笔记-01(创建项目)

1,进入angular-phonecat目录  执行下面命令 git checkout -f step-0 然后访问 http://localhost:8000/app/  页面出现 “Nothing here yet!” 现在就可以自己创建HTML,编写angular了 app/index.html <!doctype html> <html lang="en" ng-app> <head> <meta charset="utf-8

AngularJS 学习笔记 -- 指令(Directive)

AngularJS 指令学习笔记 AngularJS怎样处理指令其实是依赖于指令定义时返回的对象属性的,所以要想深入理解如何定义一个指令,首相需要理解指令定义时各个参数的含义. 完整的AngularJS指令参数 angular.module('app', []) .directive('demoDirective', function (){ // 依据官方规范,指令的定义时应该严格遵循驼峰式命名规则,使用时采用'-'连接单词 return { restrict : String in ['E'

angularjs学习笔记—事件指令

angularjs学习笔记—事件指令 小俞 4.4k 3月30日 发布 推荐 4 推荐 收藏 17 收藏,11.1k 浏览 ngClick 适用标签:所有触发条件:单击 #html <div ng-controller="LearnCtrl"> <div ng-click="click()">click me</div> <button ng-click="click()">click me<

学习笔记-AngularJs(九)

到目前为止,我们所做的学习案例都是没有加任何动画效果的,对于以往来说,我们经常会去使用一些动画插件或是css框架(如:animate.css)来点缀我们的网页,这样显得生动,高大上,那么接下来我们可以学习一下,怎么在AngularJs下来实现叼酷炫的动画操作,主要使用的命令是ngAnimate. 与之前的ngResource,ngRoute一样,需要注入ngAnimate和引入ng-animate.js才可以使用此服务,想在你的angular应用程序使用ngAnimate来实现动画功能,前提条件