标签：
目录
一年前开始使用AngularJS(以后简称ng),如今ng已经出2了.虽说2已完全变样,但是1.x还是足够优秀。
ng是一个js框架,目前最新版本为1.5.8.
官网:https://angularjs.org/
下载:
Install-Package AngularJS.Core
npm install angular@1.5.8
ng是非常少有的双向绑定框架。
特性:
构建1个ng页面 非常容易
<!DOCTYPE html>
<html ng-app>
<head>
<title>AngularJS</title>
<script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
</head>
<body>
<h1>{{model}}</h1>
<input type="text" ng-model="model">
</body>
</html>
这几乎是ng最简单的hello world 页面
其中
ng-app ng内置指令,标记ng管理的区域
{{model}} 则为ng的双括号插值语法,此处输出模型model的值
ng-model ng内置指令,用来绑定具体模型
在ng中:在HTML中ng-xxx的为指令
ng中包含:
ng-app
ng-init
ng-model
ng-bind
ng-cloak
ng-repeat
ng-class
ng-show / ng-hide / ng-if
ng-src / ng-href
ng-switch
ng-checked / ng-selected / ng-readonly / ng-disabled
ng-change / ng-copy / ng-click / ng-dblclick / ng-focus / ng-blur / ng-submit
为了对数据做一些常用的操作,ng定义了一些内置的过滤器
<!DOCTYPE html>
<html ng-app>
<head>
<title>AngularJS</title>
<script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
</head>
<body ng-init="model=10">
<h1>{{model | currency}}</h1>
<input type="text" ng-model="model">
</body>
</html>
ng-init 初始化模型数据
{{model | currency}} 的currency则为货币过滤器
{{num | currency : ‘￥‘}}
{{date | date : ‘yyyy-MM-dd hh:mm:ss EEEE‘}}
{{ childrenArray | filter : {name : ‘i‘} }} //匹配name属性中含有i的
{{ jsonTest | json}}
{{ childrenArray | limitTo : 2 }} //将会显示数组中的前两项
在实际开发环境中,不会像上述例子中 一行js代码都不写.
在ng中,我们的代码一般在某个模块下进行开发的.
方式一：
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>AngularJS</title>
<script src="Scripts/angular.min.js"></script>
</head>
<body ng-controller="HelloCtrl">
<h1>{{model}}</h1>
<input type="text" ng-model="model">
<script>
var app = angular.module(‘myApp‘, []);
app.controller(‘HelloCtrl‘, [‘$scope‘, function ($scope) {
$scope.model = ‘Hello World‘;
}]);
</script>
</body>
</html>
方式二（也可同时创建多个页面模块）：
<!DOCTYPE html>
<html>
<head>
<title>AngularJS</title>
<script src="Scripts/angular.min.js"></script>
</head>
<body ng-controller="HelloCtrl">
<h1>{{model}}</h1>
<input type="text" ng-model="model">
<button type="button" ng-click="test()">Test</button>
<script>
var app = angular.module(‘myApp‘, []);
app.controller(‘HelloCtrl‘, [‘$scope‘, function ($scope) {
$scope.model = ‘Hello World‘;
}]);
angular.bootstrap(document, [‘myApp‘]);//使用模块初始化页面
</script>
</body>
</html>
简单解释上面的API
angular.bootstrap()
angular.bootstrap(dom,[‘myApp‘]) 手动加载模块myAppangular.module()
angular.module(‘myApp‘,[]) //创建模块angular.module(‘myApp) //获取模块module.run()
module.run(function(){}) //相当于程序的Main方法module.controller()
module.controller(‘HomeCtrl‘,function(){})//创建控制器module.controller(‘HomeCtrl‘,[‘$scope‘,function(scope){}])//创建控制器(推荐)
在ng中建议将业务逻辑放在controller中执行。
本文地址:http://www.cnblogs.com/neverc/p/5903257.html
[AngularJS] AngularJS系列(1) 基础篇
标签：
原文地址：http://www.cnblogs.com/neverc/p/5903257.html
