[AngularJS] AngularJS系列(1) 基础篇

什么是AngularJS?
为什么使用/ng特性
Hello World
内置指令
内置过滤器
模块化开发

一年前开始使用AngularJS(以后简称ng),如今ng已经出2了.虽说2已完全变样,但是1.x还是足够优秀。

什么是AngularJS?

ng是一个js框架,目前最新版本为1.5.8.

官网:https://angularjs.org/

下载:

Install-Package AngularJS.Core

npm install angular@1.5.8

为什么使用/ng特性

ng是非常少有的双向绑定框架。

特性:

MV*
模块化开发
双向绑定
指令系统

Hello World

构建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管理区域
ng-init
- 初始化
ng-model
- 双向数据绑定指令
ng-bind
- 绑定数据(默认会对HTML数据转义)
ng-cloak
- 加载前隐藏,加载完显示(ng模块加载完会移出特性)
ng-repeat
- 循环遍历（每个元素作用域上有$id $index $first $last $middle $even $odd属性与item并齐）
- (key,value) in data track by $index
ng-class
- ng-class="{red:true}" 根据对象设置class
ng-show / ng-hide / ng-if
- 是否显示 / 隐藏 / 存在（ng-if通过注释标记能还原）
ng-src / ng-href
- 防止默认请求的表达式错误
ng-switch
- 当大量判断逻辑的时候，减少ng-show等的使用
ng-checked / ng-selected / ng-readonly / ng-disabled
- 一般可用ng-model(以上4个指令不是双向绑定，可实现全选勾选框代码)
ng-change / ng-copy / ng-click / ng-dblclick / ng-focus / ng-blur / ng-submit
- ng常用事件指令

内置过滤器

为了对数据做一些常用的操作,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则为货币过滤器

currency (货币处理)

{{num | currency : '￥'}}
date (日期格式化,参考代码中的DATE_FORMATS)

{{date | date : 'yyyy-MM-dd hh:mm:ss EEEE'}}
filter(匹配子串)

{{ childrenArray | filter : {name : 'i'} }} //匹配name属性中含有i的
json(格式化json对象)

{{ jsonTest | json}}
limitTo(限制数组长度或字符串长度)

{{ childrenArray | limitTo : 2 }} //将会显示数组中的前两项
lowercase(小写)
uppercase(大写)
number(格式化数字)
orderBy(排序)

模块化开发

在实际开发环境中,不会像上述例子中一行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']) 手动加载模块myApp
angular.module()
- angular.module('myApp',[],cfgFn) //创建模块
- 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