Angularjs 入门指南 #48

zdddrszj · 2016-01-06T02:42:49Z

一、Angularjs 简介

AngularJS 是一个 JavaScript 框架。它可通过 <script> 标签添加到 HTML 页面。
AngularJS 通过 指令 扩展了 HTML，且通过 表达式 绑定数据到 HTML。
AngularJS 通过 ng-directives 扩展了 HTML。
ng-app 指令定义一个 AngularJS 应用程序。
ng-model 指令把元素值（比如输入域的值）绑定到应用程序。
ng-bind 指令把应用程序数据绑定到 HTML 视图。

来，小试牛刀，运行一下下面的代码，看看结果如何：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
    </head>
    <body>
        <div ng-app="">
            <p>名字 : <input type="text" ng-model="name"></p>
            <h1>Hello {{name}}</h1>
        </div>
    </body>
</html>

😃 是不是发现神奇的地方啦，对了，这就是 Angularjs 的首要特点(数据绑定)~

当网页加载完毕，AngularJS 自动开启。
ng-app 指令告诉 AngularJS，<div> 元素是 AngularJS 应用程序的 “ 所有者 ”。
ng-model 指令把输入域的值绑定到应用程序变量 name。
ng-bind 指令把应用程序变量 name 绑定到某个段落的 innerHTML。

注意：如果移除了 ng-app 指令，HTML 将直接把表达式显示出来，不会去计算表达式的结果。

二、AngularJS 表达式

AngularJS 表达式写在双大括号内：
<div>{{ expression }}<div> 或者 <div class="{{ expression }}"></div>。
AngularJS 表达式把数据绑定到 HTML：<div ng-bind=" expression "></div>。
AngularJS 将在表达式书写的位置 " 输出 " 数据。
AngularJS 表达式也可以包含文字、运算符和变量。

示例：

<div>
    <p>数字: {{ 5 + 5 }}</p>
    <p ng-init="i=‘hello’;j='world'">字符串： {{ i + " " + j }}</p>
    <p ng-init="person={firstName:'John',lastName:'Doe'}">对象： {{ person.lastName }}</p>
    <p ng-init="arr=[1,2,3,4,5]">数组： {{ arr[2] }}</p>
</div>

三、AngularJS 指令

ng-app 指令

ng-app 指令定义了 AngularJS 应用程序的根元素。
ng-app 指令在网页加载完毕时会自动引导（自动初始化）应用程序。

ng-init 指令

ng-init 指令为 AngularJS 应用程序定义了初始值。
通常情况下，不使用 ng-init。可以使用一个控制器或模块来代替它。

ng-model 指令

ng-model 指令绑定 HTML 元素到应用程序数据。
ng-model 指令也可以：
为应用程序数据提供类型验证（number、email、required）；
为应用程序数据提供状态（invalid、dirty、touched、error）；
为 HTML 元素提供 CSS 类；
绑定 HTML 元素到 HTML 表单。

ng-repeat 指令

ng-repeat 指令对于集合中（数组中）的每个项会克隆一次 HTML 元素。

创建自定义的指令

除了 AngularJS 内置的指令外，我们还可以创建自定义指令。
你可以使用 .directive 函数来添加自定义的指令。
要调用自定义指令，HTML 元素上需要添加自定义指令名。

示例：

html 代码

<hello></hello>
<world value='WORLD'>HELLO</world>

javascript 代码

<script>
    var app = angular.module("myApp", []);
    app.directive("hello", function() {
        return {
        restrict: 'AE',
        template : "<h1>你好</h1>"
        };
    }).directive("world",function(){
        return {
            scope: {}, //局部作用域，类似javascript作用域
            restrict: 'AE',
            transclude:true, //指令内部显示位置
            template:'<div><div ng-transclude></div> {{w}}</div>',
            link:function(scope,element,attrs){
                scope.w = attrs.value;
            }
        }
    });
</script>

四、AngularJS 模型

ng-model 指令用于绑定应用程序数据到 HTML 控制器 (input, select, textarea) 的值。

示例：

html 代码

<div ng-app="myApp" ng-controller="myCtrl">
    名字: <input ng-model="name">
</div>

javascript 代码

<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        $scope.name = "John Doe";
    });
</script>

五、AngularJS 作用域

Scope (作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。
Scope 是一个对象，有可用的方法和属性。
Scope 可应用在视图和控制器上。

示例：

html 代码

<div ng-app="myApp" ng-controller="myCtrl">
    <ul>
        <li ng-repeat="x in names">{{x}}
    </ul>
</div>

javascript 代码

<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        $scope.names = ["Tom", "Shirly", "Lily"];
    });
</script>

这里只有一个作用域 scope，所以处理起来比较简单，但在大型项目中， HTML DOM 中有多个作用域，这时就需要知道自己所使用的 scope 对应的作用域是哪一个。

所有的应用都有一个 $rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中。
$rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值，可以在各个 controller 中使用。

示例：

html 代码

<div ng-app="myApp" ng-controller="myCtrl">
    <h1>{{lastname}} 家族成员:</h1>
    <ul>
        <li ng-repeat="x in names">{{x}} {{lastname}}
    </ul>
</div>

javascript 代码

<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope, $rootScope) {
        $scope.names = ["Tom", "Shirly", "Lily"];
        $rootScope.lastname = "Wang";
    });
</script>

六、AngularJS 控制器

AngularJS 应用程序被控制器控制。
ng-controller 指令定义了应用程序控制器。
控制器是 JavaScript 对象，由标准的 JavaScript 对象 的构造函数创建。

示例：

html 代码

<div ng-app="myApp" ng-controller="personCtrl">
    名: <input type="text" ng-model="firstName"><br>
    姓: <input type="text" ng-model="lastName"><br>
    <br>
    姓名: {{fullName()}}
</div>

<script>
    var app = angular.module('myApp', []);
    app.controller('personCtrl', function($scope) {
        $scope.firstName = "Shirly";
        $scope.lastName = "Wang";
        $scope.fullName = function() {
            return $scope.firstName + " " + $scope.lastName;
        }
    });
</script>

七、AngularJS 过滤器

过滤器可以使用一个管道字符（|）添加到表达式和指令中。
AngularJS 过滤器可用于转换数据，常用过滤器如下：

过滤器	描述
currency	格式化数字为货币格式
filter	从数组项中选择一个子集
lowercase	格式化字符串为小写
orderBy	根据某个表达式排列数组
uppercase	格式化字符串为大写

示例：

<div ng-app="myApp" ng-controller="personCtrl">
    <p>姓名为 {{ lastName | uppercase }}</p>
</div>

其它过滤器类似，大家可自行实验。

八、AngularJS 事件

AngularJS 有自己的 HTML 事件指令。
ng-click 指令定义了 AngularJS 点击事件。

示例：

<div ng-app="" ng-init="count=0">
    <button ng-click="count = count + 1">点我！</button>
    <p>{{ count }}</p>
</div>

ng-show 指令可用于设置应用中的一部分是否可见。
ng-show="false" 可以设置 HTML 元素不可见。
ng-show="true" 可以以设置 HTML 元素可见。

示例：

html 代码

<div ng-app="myApp" ng-controller="personCtrl">
    <button ng-click="toggle()">隐藏/显示</button>
    <p ng-show="myVar">
        名: <input type="text" ng-model="firstName"><br>
        姓: <input type="text" ng-model="lastName"><br>
        <br>
        姓名: {{firstName + " " + lastName}}
    </p>
</div>

javascript 代码

<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
    $scope.firstName = "Shirly",
    $scope.lastName = "Wang"
    $scope.myVar = true;
    $scope.toggle = function() {
        $scope.myVar = !$scope.myVar;
    }
});
</script>

ng-hide 指令和 ng-show 正好相反。

九、AngularJS 服务

$http 是 AngularJS 中的一个核心服务，用于读取远程服务器的数据。

示例：

html 代码

<div ng-app="myApp" ng-controller="booklistCtrl"> 
    <ul>
      <li ng-repeat="book in booklist">
        {{ book.name + ', ' + book.price }}
      </li>
    </ul>
</div>

javascript 代码

<script src="js/angular-1.3.0.min.js"></script>
<script>
    var app = angular.module("myApp", []);
    app.controller('booklistCtrl',function($scope,$http){
        $scope.booklist = "";
        $http({
            method:'GET',
            url:'data.json'
        }).success(function(data){
            $scope.booklist = data;
        }).error(function(data){
            console.log(data);
        });
    });
</script>

查看demo

十、AngularJS 路由

AngularJS 路由功能是一个纯前端的解决方案，与我们熟悉的后台路由不太一样。后台路由，通过不同的 URL 会路由到不同的控制器上 (controller)，再渲染 (render) 到页面 (HTML) 。AngularJS 的前端路由，需要提前对指定的 (ng-app) ，定义路由规则 (routeProvider) ，然后通过不同的 URL ，告诉 (ng-app) 加载哪个页面 (HTML) ，再渲染到 (ng-app) 视图 (ng-view) 中。

AngularJS 的前端路由，虽然 URL 输入不一样，页面展示不一样，其实完成的单页 (ng-app) 视图 (ng-view) 的局部刷新。这样来看，AngularJS 做单页应用就有点标配的感觉了。

示例：

html 代码

<body ng-app="myApp" ng-view>
</body>

javascript 代码

<script src="js/angular-1.3.0.min.js"></script>
<script src="js/angular-route-1.3.0.min.js"></script>
<script>
    var app = angular.module("myApp", ['ngRoute']);
    app.config(function($routeProvider){
        $routeProvider.when('/hello',{
            templateUrl:'tpl/hello.html',
            controller:'helloCtrl'
        }).when('/booklist',{
            templateUrl:'tpl/booklist.html',
            controller:'booklistCtrl'
        }).otherwise({
            redirectTo:'/hello'
        });
    });
    app.controller('booklistCtrl',function($scope,$http){
        $scope.booklist = "";
        $http({
            method:'GET',
            url:'data.json'
        }).success(function(data){
            $scope.booklist = data;
        }).error(function(data){
            console.log(data);
        });
    }).controller('helloCtrl',function($scope){
        $scope.hello = 'hello';
    });
</script>

访问 hello 页面地址：.../demoroute.html#/hello

查看demo

访问 booklist 页面地址：.../demoroute.html#/booklist

查看demo

❤️❤️❤️ 好了，今天就到这里吧~

## **Thanks**

The text was updated successfully, but these errors were encountered:

YIXUNFE added 围观技术棒棒哒 labels Jan 11, 2016

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Angularjs 入门指南 #48

Angularjs 入门指南 #48

zdddrszj commented Jan 6, 2016

Angularjs 入门指南 #48

Angularjs 入门指南 #48

Comments

zdddrszj commented Jan 6, 2016

一、Angularjs 简介

二、AngularJS 表达式

三、AngularJS 指令

ng-app 指令

ng-init 指令

ng-model 指令

ng-repeat 指令

创建自定义的指令

四、AngularJS 模型

五、AngularJS 作用域

六、AngularJS 控制器

七、AngularJS 过滤器

八、AngularJS 事件

九、AngularJS 服务

十、AngularJS 路由