专业编程基础技术教程

网站首页 > 基础教程 正文

AngularJs入门，一个简单的demo angular实战

ccvgpt 2024-11-14 14:21:57 基础教程 7 ℃

AngularJs入门，一个简单的demo

基于AngularJS入门与进阶（江荣波 著）这本书的笔记

AngularJS 1.x的demo

AngularJs入门，一个简单的demo angular实战

AngularJS1.x和Angular2,4,5是不一样的两个东西，构建方式，语法，都很多不同

首先webStrom构建好一个AngularJs项目，默认生成了目录如下，Index.html是我们的主页面。Lib文件夹是库文件，当我们创建一个项目后，大部分情况会把相应的控制器、指令、路由、服务都分别放在独立的文件中，然后在app.js中注入。这里只是初试的目录结构，实际还会修改。

认识Angular

简单的认识下AngularJs

一个简单的Hello Word
<!DOCTYPE html>
<html ng-app>
<head>
    <meta charset="UTF-8">
    <title>Hello Word</title>
    <script  src="/lib/angular/angular.js"></script>
</head>
<body>
    <div>{{"Hello Word"}}</div>
    <div>{{"Hello Angular"}}</div>
</body>
</html>

页面只引用了最基本的angular.js

ng-app ：ng-app是AngularJS的一个内置指令，可以出现在任意位置，并有两个作用，一个是启动AngularJS框架，另一个是告诉AngularJS框架从ng-app指令所在标签的开始标签到结束标签之间的所有DOM元素由AnguarJS框架进行管理。

{{}}：{{}}是AngularJS的表达式形式，由两个嵌套的大括号构成，大括号中间为表达式内容，AngularJS会对表达式内容进行解析，然后将表达式结果输出到浏览器。

AngularJs的表达式

表达式格式：{{expression}}

  1. AngularJS框架遇到嵌套的两层大括号时会把嵌套大括号中的内容作为表达式处理。
  2. 表达式中可以四则运算，就和在javaScript写四则运算一样。<div>1 + 1 = {{1 + 1}}</div> 页面会输出2
  3. 表达式中可以进行boolean运行{{true && false}} false{{true || false}} true
AngularJs中的表达式与作用域

AngularJS表达式可以访问作用域中的数据

<!DOCTYPE html>
<html ng-app>
<head>
    <meta charset="UTF-8">
    <title>Hello Word</title>
    <script  src="/lib/angular/angular.js"></script>
</head>
<body>
    <div>{{"Hello Angular"}}</div>
    <div ng-init="person={'name': 'jock','sex' : 'man'};address=['一号住址','二号住址']">
        <div>姓名：{{person.name}}</div>
        <div>性别：{{person.sex}}</div>
        <div>住址：{{address[1]}}</div>
    </div>
</body>
</html>

访问页面

Hello Angular
姓名：jock
性别：man
住址：二号住址
AngularJS双向数据绑定

双向数据绑定的意思是页面的操作能同步到作用域中，作用域中修改了，会反馈页面。

ng-model 指令

ng-model内置指令，该指令只能用在表单元素上

<!DOCTYPE html>
<html ng-app>
<head>
    <meta charset="UTF-8">
    <title>Hello Word</title>
    <script  src="/lib/angular/angular.js"></script>
</head>
<body>
    <div><span>姓名：</span><input type="text" ng-model="userName"/></div>
    <div><span>展示：{{userName}}</span></div>
</body>
</html>


当AngularJS遇到ng-app指令时就会创建一个名为

rootScope的子作用域。

var $rootScope=name:”xxx"

ng-bind 指令

ng-bind指令作用是实现作用域到视图的单向数据绑定，其功能与{{}}表达式一样。

在AngularJS中显示模型中的数据有两种方式：

  1. 使用花括号插值的方式
  2. 使用基于属性的指令，ng-bind

这两种方式显示出的效果是一样的，主要的区别为ng-bind只能单个绑定变量，而{{ }}可以多个绑定变量。

使用ng-bind-template可以绑定一个模板，模板中可以包含多个AngularJS的表达式

<h1 ng-bind-template ="{{text}} {{text}}" ></h1>

<!DOCTYPE html>
<html ng-app>
<head>
    <meta charset="UTF-8">
    <title>Hello Word</title>
    <script  src="/lib/angular/angular.js"></script>
</head>
<body ng-init="userName='test'">
    <div><span>双向绑定：</span><input type="text" ng-model="userName"/></div>
    <div><span>单向绑定：</span><span ng-bind="userName"/></div>
    <div><span>展示：{{userName}}</span></div>
</body>
</html>

Tags：

猜你喜欢

最近发表
标签列表