AngularJS学习笔记一

最新推荐文章于 2020-12-11 15:50:10 发布

seamanwang

最新推荐文章于 2020-12-11 15:50:10 发布

阅读量217

点赞数

分类专栏： angularJS

本文链接：https://blog.csdn.net/seamanwang/article/details/51968705

版权

2 篇文章 0 订阅

订阅专栏

什么是AngularJS

AngularJS是一个JavaScript框架。它是一个以JavaScript编写的库。

AngularJS是一个以JavaScript文件形式发布的，可通过script标签添加到网页中。

AngularJS扩展了HTML

AngularJS使得开发现代的单一页面应用程序变得更容易

AngularJS通过ng-directives扩展了HTML。

AngularJS指令

AngularJS指令是以ng作为前缀的HTML属性。(HTML5 允许扩展的（自制的）属性，以 data- 开头。
AngularJS 属性以 ng- 开头，但是您可以使用 data-ng- 来让网页对 HTML5 有效。)

ng-init指令初始化AngularJS应用程序变量。

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

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

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

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

<span style="white-space:pre">	</span><h1>Hello <span ng-bind="name"></span></h1>
</div>

当页面加载完毕，AngularJS自动开启。

ng-app指令告诉AngularJS,<div>元素是AngularJS应用程序的所有者。

ng-mode指令把输入域的值绑定到应用程序变量name。

ng-bind指令把应用程序变量name绑定到某个段落的innerHTML。

AngularJS表达式

AngularJS表达式在双大括号内：{{expression}}。

AngularJS表达式把数据绑定到HTML，这与ng-bind指令有异曲同工之妙。

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

AngularJS表达式很像JavaScript表达式：它们可以包含文字，运算符和变量。

注意：如果您移除了 ng-app 指令，HTML 将直接把表达式显示出来，不会去计算表达式的结果。

AngularJS应用

AngularJS模块（Module）定义了AngularJS应用。

AngularJS控制器（Controller）用于控制AngularJS应用。

ng-app指令定义应用，ng-controller定义了控制器。

AngularJS模块定义应用：

  var app = angular.module('myApp', []); 

AngularJS 控制器控制应用:

   app.controller('myCtrl', function($scope) { 
  
     $scope.firstName= "John"; 
  
     $scope.lastName= "Doe"; 
  
 });

关注