AngularJS——0.AngularJS环境搭建及基本概念

发布时间：2020-12-17 10:12:05 所属栏目：安全来源：网络整理

导读：Angular Intro AngularJS is a JavaScript Framework AngularJS是一个Javascript框架，它可以通过script标签添加到HTML页面，AngularJS通过directives 扩展了HTML，通过Expressions绑定数据到前台页面显示。 Tip：把脚本加载放到body底部，这样会提高HTML的

Angular Intro

AngularJS is a JavaScript Framework

　　AngularJS是一个Javascript框架，它可以通过<script>标签添加到HTML页面，AngularJS通过directives 扩展了HTML，通过Expressions绑定数据到前台页面显示。

Tip：把脚本加载放到<body>底部，这样会提高HTML的加载速度，不受脚本加载的限制。

AngularJS Extends HTML

　AngularJS 通过 ng-directives 扩展了 HTML。

　ng-app 指令定义一个 AngularJS 应用程序。

　ng-model 指令把元素值（比如输入域的值）绑定到应用程序。

　ng-bind 指令把应用程序数据绑定到 HTML 视图。

Angular 四个特性

1.MVC

　Model：数据模型层

　View：视图层，负责展示

　Controller：业务逻辑和控制逻辑

　好处：只是手段，目标是模块化和复用，全部借助于scope实现mvc

2.Moudules

　模块定义了一个应用程序。

　模块是应用程序中不同部分的容器。

　模块是应用控制器的容器。

　控制器通常属于一个模块。

3.Directives

　AngularJS中重要的特性，主要是用来扩展HTML的，如ng-app，ng-controller ，都带有ng-的前缀。

4.Data Binding

　 {{ exp}} 表达式是一个 AngularJS 数据绑定表达式。

　AngularJS 中的数据绑定，同步了 AngularJS 表达式与 AngularJS 数据。

　{{ exp}} 是通过 ng-model="exp" 进行同步。

　ng-model 指令绑定 HTML 元素到应用程序数据。

Angular 环境搭建

　　这个很简单，可以从github下载，也可以安装nodejs，进入npm命令去install Angular。

　　基本的app目录是这样的

Angular 例子

1.给module添加derective

HelloAngular_Directive.html

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

HelloAngular_Directive.js

<pre name="code" class="javascript">var myModule=angular.module('MyModule',[]);
myModule.directive("hello",function () {
	return {
		restrict: 'AECM',template: '<h2>hello,world!</h2>',replace: true
	}
});

2.给module添加controller

HelloAngular_MVC.html

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

HelloAngular_MVC.js

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

3.双向数据绑定

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>

总结

第一次接触angularjs觉得语法很是别扭，简单的几句话就完成了很多事情。自带丰富的derective让很多事情做起来很简单。angular有很多优点，在前端实现了MVC，引入模板，数据双向绑定，路由等等功能，今后会对这些内容进行深入的思考。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!