Note01--核心特性

David_Hernandez

于 2017-01-23 17:29:57 发布

阅读量521

点赞数

分类专栏： AngularJS 文章标签： angularjs

本文链接：https://blog.csdn.net/kisslotus/article/details/54694902

版权

AngularJS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

Source：《AngularJS实战》
1. MVC
a. HelloAngular_MVC.html

<!doctype html>
<html ng-app>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <div ng-controller="HelloAngular">
            <p>{{greeting.text}},Angular</p>
        </div>
    </body>
    <script src="js/angular-1.3.0.js"></script>
    <script src="HelloAngular_MVC.js"></script>
</html>

    b. HelloAngular_MVC.js

function HelloAngular($scope) {
  $scope.greeting = {
        text: 'Hello'
    };
}

2. Module

这里写图片描述
a. HelloAngular_Module.html

<!doctype html>
<html ng-app="HelloAngular">
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <div ng-controller="helloAngular">
            <p>{{greeting.text}},Angular</p>
        </div>
    </body>
    <script src="js/angular-1.3.0.js"></script>
    <script src="HelloAngular_Module.js"></script>
</html>

    b. HelloAngular_Module.js

var myModule = angular.module("HelloAngular", []);

myModule.controller("helloAngular", ['$scope',
    function HelloAngular($scope) {
        $scope.greeting = {
            text: 'Hello'
        };
    }
]);

3. 指令系统

这里写图片描述
a. HelloAngular_Directive.html

<!doctype html>
<html ng-app="MyModule">
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <hello></hello>
    </body>
    <script src="js/angular-1.3.0.js"></script>
    <script src="HelloAngular_Directive.js"></script>
</html>

    b. HelloAngular_Directive.js

var myModule = angular.module("MyModule", []);
myModule.directive("hello", function() {
    return {
        restrict: 'E',
        template: '<div>Hi everyone!</div>',
        replace: true
    }
});

4. 双向数据绑定

这里写图片描述

a. 单向数据绑定，HTML标签一旦生成之后就无法再变，当有新的数据产生时，只能再次编译，重新替换；
b. HelloAngular_TwoWayDataBinding.html

<!doctype html>
<html ng-app>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <div>
            <input ng-model="greeting.text"/>
            <p>{{greeting.text}},AngularJS</p>
        </div>
    </body>
    <script src="js/angular-1.3.0.js"></script>
</html>

David_Hernandez

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Note01--核心特性

Source：《AngularJS实战》 1. MVC a. HelloAngular_MVC.html<!doctype html><html ng-app> <head> <meta charset="utf-8"> </head> <body> <div ng-controller="HelloAngular
复制链接

扫一扫

专栏目录