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

最新推荐文章于 2023-10-04 15:37:35 发布

我是周洲

最新推荐文章于 2023-10-04 15:37:35 发布

阅读量2.5k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： 4.Hybird_APP AngularJS 文章标签： angular angularjs 框架 javascript

本文链接：https://blog.youkuaiyun.com/zhou2s_101216/article/details/51232772

4.Hybird_APP 同时被 2 个专栏收录

5 篇文章

订阅专栏

AngularJS

5 篇文章

订阅专栏

本文介绍了AngularJS的基础概念，包括如何将其作为一个JavaScript框架添加到HTML页面中，并通过directives和expressions扩展HTML的功能。同时，文章还详细讲解了AngularJS的四大特性：MVC架构、模块化、Directives和数据绑定，并提供了具体的代码示例。

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>