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

前端之家收集整理的这篇文章主要介绍了AngularJS(0)——AngularJS环境搭建及基本概念前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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,引入模板,数据双向绑定,路由等等功能,今后会对这些内容进行深入的思考。
原文链接:https://www.f2er.com/angularjs/149628.html

猜你在找的Angularjs相关文章