我爱编程

angular安装及细节注意

2017-03-06  本文已影响54人  紫由袅

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

上一篇下一篇

猜你喜欢

热点阅读