AngularJs实战（AngularJs的四大核心理念）

AngularJS四大核心理念解析

最新推荐文章于 2024-03-02 08:26:51 发布

Vivianluolita

最新推荐文章于 2024-03-02 08:26:51 发布

阅读量3.4k

点赞数

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/Vivianluolita/article/details/52713808

AngularJs 专栏收录该内容

1 篇文章

订阅专栏

1. AngularJs四大核心理念：MVC,模块化，指令系统，双向数据绑定
2. 分别用程序解释AngularJs四大核心理念

MVC，数据模型层，视图层，控制层

（1）MVC

<!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>

<!--此处的scope有点像全局变量，包含greeting属性，并赋值.依赖注入-->

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

（2）模块化

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

<pre style="font-family: 宋体; font-size: 9pt; background-color: rgb(255, 255, 255);"><span style="color:#808080;"><em>/*定义某块并调用方法，scope依旧是依赖注入特性
</em></span><span style="color:#808080;"><em>* 不再用全局函数作为控制器*/
</em></span><span style="color:#808080;"><em>/*在模块上调用方法*/</em></span>

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

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

（3）指令系统

<!--第三个例子 指令 自定义标签 directive-->
<!--html下有一个ngapp的指令-->
<!--ng-app相当于main方法-->

<!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>

/*hello为自定义指令*/

var myModule = angular.module("MyModule", []);
myModule.directive("hello", function() {
    return {
        restrict: 'E',
        template: '<div>Hi everyone!</div>',<pre style="font-family: 宋体; font-size: 9pt; background-color: rgb(255, 255, 255);"><span style="color:#808080;"><em>/*返回一个模板*/</em></span>

replace: true }});

（4）双向数据绑定

<!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>

关于单向和双向数据绑定见链接：点击打开链接