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

- 日理万妓 2022-08-21 07:57 243阅读 0赞

# Angular Intro #

![20160424114933050][]

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 四个特性 #

![SouthEast][]

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目录是这样的

![SouthEast 1][]

# 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
    	}
    });

![SouthEast 2][]

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'
    		};
    }

![SouthEast 3][]

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>

![SouthEast 4][]

# 总结 #

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

[20160424114933050]: /images/20220724/0a61d91efc5744cda7cd9656aa9a58b0.png
[SouthEast]: /images/20220724/5e73884b13c346d9af6001a12e2a2521.png
[SouthEast 1]: /images/20220724/dda69183925a4e769cd5e5a1230f925d.png
[SouthEast 2]: /images/20220724/f020dc8adde54a9ab4fe83ed6b38eeec.png
[SouthEast 3]: /images/20220724/261b12ea3dea43ad90fc7a23d603a4af.png
[SouthEast 4]: /images/20220724/2725e2a115564f268d756512e37b30e3.png