Angular js 简介

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Angular js 简介相关的知识,希望对你有一定的参考价值。

---恢复内容开始---

1:通过 <script> 标签添加一个anjular.js 文件到 HTML 页面 ,(建议把脚本放到body元素的底部)

     AngularJS 属性以 ng- 开头,但是您可以使用 data-ng- 来让网页对 html5 有效。
 

2:常用的 angular js 的Directives(指令)

     ng-app:指令定义一个angular js  的应用程序。如果您移除了 ng-app 指令,HTML 将直接把表达式显示出来,不会去计算表达式的结果。

    ng-model: 指令吧元素自(比如输入域的值)绑定到应用程序

ng-bind:指令吧应用程序数据绑定到html视图 :绑定数据直接输出 指令把应用程序变量 name 绑定到某个段落的 innerHTML。

  ng-init:指令初始化angular js应用程序变量   

 ng-controller,

 ng-show:
 

3: Angular js 的表达式

Angular JS 的表达式写在双大括号内{{ expression}}

 Angular JS 表达式把数据绑定到html,这与ng-bind 指令相似

Angular JS 将在表达式书写的位置“输出”数据

Angular JS表达式与 javascript 表达式:他们可以包含文字,运算,和变量。例如  {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}

 

 4:Angular JS 应用

Angular JS模块(Module)定义了Angular JS 的应用

Angular JS  控制器(controller)用于控制angular 就是应用

  ng-npp指令定义了应用,ng -controller 定义了控制器  

 

 



 

 

HTML5 允许扩展的(自制的)属性,以 data- 开头
pasting

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="">
 <p>名字 : <input type="text" ng-model="name"></p>
 <h1>Hello {{name}}</h1>
</div>

</body>
</html>
 

 

 

 


 

 

<div ng-app="" ng-init="firstName=‘John‘">

<p>姓名为 <span ng-bind="firstName"></span></p>

</div>

 

 


 angular js 的应用

<div ng-app="myApp" ng-controller="myCtrl">
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}

</div>

<script>//
var app = angular.module(myApp, []);//anggular js 的模块
app.controller(myCtrl, function($scope) { //anjular js 的控制器
    $scope.firstName= "John";
    $scope.lastName= "Doe";
});
</script>

 

以上是关于Angular js 简介的主要内容,如果未能解决你的问题,请参考以下文章

angular简介

浅议Angular -- AngularJS简介

Angular.js初步认知

Angular js 单页应用环境搭建

Angular JS

angular