AngularJS学习一

来源：互联网发布：vb6.0简单编程教学编辑：程序博客网时间：2024/06/15 14:35

AngularJS是一款来自Google的前端JS框架，该框架的最核心特性有：MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入、扩展指令等等。

<!DOCTYPE html><html ng-app="myApp"><head>    <meta charset="UTF-8">    <title>Title</title>    <meta name="viewport"          content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">    <!--引入angular.js文件-->    <script src="angular.js"></script></head><body><div ng-controller="myController">    <input ng-model="name">    {{name}}</div><script type="text/javascript">    var app = angular.module('myApp', []);    app.controller('myController', function ($scope) {        $scope.name = "hello world";    });</script></body></html>

<pre name="code" class="html"><html ng-app="myApp"> ng-app属性用来告诉Angular页面中哪一部分需要接受它的管理。把这个属性放在<html>标签上就是在告诉Angular希望它管理整个页面，也可以放在某个<div>标签上。

<pre name="code" class="html"><div ng-controller="myController"> ng-controller属性是指定一个控制器，用来处理一些业务逻辑。

<pre name="code" class="html">ng-model="name" ng-model属性是进行数据绑定，创建数据绑定关系。

{{}} 双花括号是用来表达式输出的，还有一种形式是使用ng-bind指令输出，如：<p ng-bind="name"></p>这种方式在页面加载完成之前不会给用户呈现任何东西，而双花括号的方式有可能让用户看到一些未被渲染的东西。

通过字符串来存储数据：

$scope.name = "hello world";引用方式：{{name}}

通过对象来存储数据：var message = {};message.someText = "how are you";引用方式：{{message.someText}}

Angular基本运作流程：用户请求应用的起始页；用户的浏览器向服务器发起一次HTTP连接，然后加载index.html页面，这个页面里包含了模板；Angular被加载到页面中，等待页面加载完成，然后查找ng-app指令，用来定义模板边界；也就是浏览器需要先加载HTML页面，渲染它，然后Angular才有机会把它解释成你期望看到的内容。

0 0