首页 > 语言 > JavaScript > 正文

AngularJS实用基础知识_入门必备篇(推荐)

2024-05-06 15:14:39
字体:
来源:转载
供稿:网友

前言

今天来和大家学习一下AngularJS……

AngularJS 通过新的属性和表达式扩展了 HTML。

AngularJS 可以构建一个单一页面应用程序。

AngularJS 学习起来非常简单。

一、AngularJS指令与表达式

【AngularJS常用指令】

1、ng-app:声明Angular所管辖的区域,一般写在body或HTML上,原则上一个页面只有一个。

2、ng-model:把元素值(比如输入域的值)绑定到应用程序的变量中。

eg:<input type="text" ng-model="name"/>

3、ng-bind:把应用程序变量中的数据绑定到HTML视图中,可用表达式替代。

eg:<div id="div1" ng-bind="name">
</div>等效于<div id="div1" >{{name}}</div>

4、ng-init:初始化 AngularJS应用程序变量。

eg:<body data-ng-app="" ng-init="name=123">

5、表达式:{{}}绑定表达式,可以包含文字,运算符和变量。

但是表达式在网页加载瞬间会看到{{}},所以可以用ng-bind=""替代。

eg:{{ 5 + "" + 5 + ',Angular' }}

【基本概念】

指令:AngularJS中,通过扩展HTML的属性提供功能。

所以,ng-开头的新属性,被我们成为指令。

二、AngularJS中的MVC中的作用域

【MVC三层架构】

1、model(模型):

应用程序中用于处理数据的部分。(保存或修改数据到数据库、变量等)。AngularJS中的Model特指的是:数据。

View(视图):用户看到的用于显示数据的页面。

Controller(控制器):应用程序中处理用户交互的部分。负责从视图读取数据,控制用户输入,并向模型发送数据。

2、工作原理:

用户从视图层发出请求,controller接收到请求后转发给对应的model处理,model处理完成后返回结果给controller,并在View层反馈给用户.

3、创建一个Angular模块,即ng-app所绑定的部分 ,需传递两个参数:

①模块名称:即ng-app所需要绑定的名称,ng-app="myApp"

②数组:需要注入的模块名称,不需要可为空。

eg:var app= angular.module("myApp",[]);

在Angular模块上,创建一个控制器Controller,需要传递两个参数。

①Controller名称,即ng-controller需要绑定的名称。ng-controller="myCtrl"

②Controllerd的构造函数:构造函数可以传入多个参数,包括$scope/$rootScope以及各种系统内置对象;

【AngularJS中的作用域】

①$scope:局部作用域,声明在$scope上的属性和方法,只能在当前的Controller中使用

②$rootScope:根作用域,声明在$rootScope上的属性和方法,

可以在ng-app所包含的任何区域使用(无论是否同Controller,或是否在Controller包含范围中)

>>>若没有使用$scope声明变量,而直接在HTML中使用ng-model绑定的变量作用域为:

1、如果ng-model在某个ng-controller中,则此变量会默认绑定到当前Controller的$scope上;

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表

图片精选