1.在文件目录下打开命令行对应定位到此目录执行：npm install angular
安装angular的第一个版本，默认安装的是1.0的版本，第一个版本是用js编写的，第二个版本typescript
2.我们在node_modules找angular的文件夹，拷贝这个angular.js到我们的项目文件夹里面
我们开发（调试）的时候用angular.js（未压缩的版本）
我们是发布的时候用angular.min.js（压缩的版本）
3.在html结构里面引入angular.js
src="js/angular.js">
并调试console.log(angular);如果输出的是一个对象那说明引入成功
4.首先定义第一个模块
angular.module('moduleOne',[]);
ng-app="moduleOne"是主模块的作用域跟angular.module('moduleOne',[]);
定义模块的名字格式最好是：模块名+App
ng-controller='indexA'是再划分主模块的作用域angular.module('moduleOne',[]).controller('indexA');
定义控制器的名字格式最好是：控制器名字+Ctrl
5.angular.js如果是在头部加载的话，页面就不会出现{{}}效果，如果放在后面则会，一般其实我们会把js放在后面，{{name}}相当于ng-bind="name"
6.angular.js里面使用的是驼峰原则的命名
数据从后端到前端
font-end
<-data-ajax back-end
数据从前端到后端
font-end
ajax-data-> back-end
$scope,$http,{{}} 从后端把数据渲染到前端
ng-model
ng-model可以用在input textarea select
ng-model 跟 {{}}它们两个都可以渲染值
ng-model多了一个接受输入值的功能
双向数据绑定，$scope.name改变，ng-model="name",
{{name}}
ng-model改变，其他两个也会改变
ng-click
把函数作为数据，绑定到html结构里面
html
ng-click="jk()">JK
js
$scope.jk = function(){
console.log('提交数据')
$http.get('test.php',{
params:{
name:$scope.input
}
}).success(function(data){
})
}
表达式
表达式可以算数运算，字符串拼接
{{name+name}}
表达式也支持三元表达式，相当于if()else{}
{{name?'a':'b'}}
来自<https://github.com/Wscats/Angular-news/issues/5>
Ng
-repeat:
ng-repeat="arr in arrs|limitTo:3:pageNum">{{arr.name}}
进度条的使用：range
type="range" ng-model="input" />
ng-model="input">
$rootScope的使用：
团队开发里面的思路：
每个人有该负责的模块，有相应的控制器
src="js/indexCtrl.js">
src="js/indexCtrl2.js">
注意：一旦删除其中的控制器，js里面的代码也不会执行
根作用域
Angular js根作用域：$rootScope
在控制器外定义一个值
$rootScope.title ='wowoowo';
在控制器任意地方也可以执行
它的兄弟之间也可以定义
控制与控制之间可以传递数据
文件1js：$rootScope.a = '123'
文件2js：$scope.a = $rootScope.title;
相互传递
AngularJS过滤器
转换数据：大写
方法1：{{ name|uppercase}}
方法2：$scope.name.toUpperCase()
小写
{{name|lowercase}}
处理数字价钱货币：
{{
num|currency}
{{num|number:1}}//代表精确到第几位
{{ num|currency:'￥'}}//￥12,345,00.
日期的写法：
{{data|data:'yyyy/MM/dd/hh/mm/ss/EEEE'}}\\
2017/02/15/12/15/48/Wednesday
MM：代表月份
mm：代表分钟
注意：在网上下载的时间戳要加000，加三个零，因为转换成了毫秒
过滤器
limitTo:截取的长度、截取的起始坐标
{{name|limitTo:2:1}}可以负数，负数表示从后往前截数据
也可以筛选数组，实现分页
json：里面是一个对象
{{obj|json}}相当于JSON.stringify
自定义过滤器：
App.filter('myfilter',[function($http)])
$scope是一个局部的作用域，而自定义的过滤器是全局的，所以自定义的过滤器不会出现$scope
网友评论