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