AngularJS基础

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

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

<script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script>

AngularJS 通过 ng-directives 扩展了 HTML。

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

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

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

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

例子:

 1 <div ng-app="">
 2
 3 <p>在输入框中尝试输入:</p>
 4 <p>
 5     姓名: <input type="text" ng-model="name"><br>
 6     姓名: <input type="text" ng-model="name">
 7     </p>
 8 <p ng-bind="name"></p>
 9
10 </div>

上诉代码中,div(ng-app)就是angular js应用程序的所有者,input(ng-model)的应用程序的值绑定到变量name上,p(ng-bind)再把值绑定到p
标签的innerhtml。

Angular JS能干什么:

AngularJS 使得开发现代的单一页面应用程序(SPAs:Single Page Applications)变得更加容易。

  • AngularJS 把应用程序数据绑定到 HTML 元素。
  • AngularJS 可以克隆和重复 HTML 元素。
  • AngularJS 可以隐藏和显示 HTML 元素。
  • AngularJS 可以在 HTML 元素"背后"添加代码。
  • AngularJS 支持输入验证。

AngularJS表达式:

AngularJS 表达式写在双大括号内:{{ expression }}

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

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

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

例如:<p>AngularJS表达式 : {{10*20}}</p>

输出:200

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";
});

时间: 2024-10-21 23:20:25

AngularJS基础的相关文章

转: angularjs基础教程(~~较通俗)

Angularjs-基础教程(1) 很久没有写过东西了,感觉写东西都不知道从哪里开始了,现在还是先写点技术性的吧,angularjs--我兄弟把它叫成“俺哥啦js” 1.下载 官方网址:https://angularjs.org/ CDN:https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.5/angular.min.js 2.简单介绍使用 1.ng-app   ~~~angularjs的渲染范围 决定了angularjs的作用域

AngularJS基础01 从HelloWorld说起

作者:arccosxy  转载请注明出处:http://www.cnblogs.com/arccosxy/ 准备工作 首先,创建一个名为index.html的HTML文件,代码如下: <!DOCTYPE html> <head> <title>Learning AngularJS</title> </head> <body> </body> </html> 接下来就是加载angular.js库,访问https:

AngularJS基础知识

AngularJS基础知识 --2015.06.28 1.     AngularJS是什么? Angular官网:https://angularjs.org/ ,API: http://docs.angularjs.org/api AngularJS是一个MV*(Model-View-Whatever, 不管是MVC或者MVVM,统称为MDV(Model Drive View))的JavaScript框架,是Google推出的SPA(single-page-application, 单页面应用

angularJS 基础回顾

div#cpmenu {height:200px;float:left;} div#cpcontent {height:200px;width:150px;float:left;} 文章作者:松阳 原文链接:http://blog.csdn.net/fansongy/article/details/44106207 数据 "I'm string" 123 {A:"I'm",B:"Dictory"} {"I","am&

3天学习完AngularJS基础内容小结

简介:AngularJS 是一个 JavaScript 框架.它是一个以 JavaScript 编写的库. 一.AngularJS大致功能模块 二.页面交互变得简单 1.示例:计算价格 <html> <head> <meta name="viewport" content="width=device-width" /> <meta charset="utf-8"> <script src=&q

AngularJS基础知识1

一.angularJS简介 1.什么是 AngularJS? AngularJS 是一个 JavaScript 框架.它是一个以 JavaScript 编写的库.AngularJS是协助搭建单页面工程的开源前端框架.它通过MVC模式使得开发与测试变得更容易.AngularJS 是以一个 JavaScript 文件形式发布的,可通过 script 标签添加到网页中: <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angula

AngularJs基础总结(1.4版本)

注明:现在用的是最新的1系列1.4版本. 一.细节方面入手: 1,ng-app根节点,一般别写在html上面,最多也就写在body就行了,因为我们难免会忘记这个写在哪里,然后复制一些案例代码却总报错. <!DOCTYPE html> <html> <head> <title>基础入门</title> <meta http-equiv="content-type" content="text/html; char

03基础-AngularJS基础教程

0. 目录 目录 前言 正文 1 Set up 2 表达式 3 指令 ng-bind ng-init ng-non-bindable ng-show 4 作用域 双向绑定Two-way binding ng-model 5 总结 声明 1. 前言 AngularJS是为了克服HTML在构建应用上的不足而设计的.HTML是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了,所以AngularJS做了一些工作来来解决静态网页技术在构建动态应用上的不足. AngularJS

04控制器-AngularJS基础教程

0. 目录 目录 前言 正文 1 ng-controller 2 构建模型-Constructing the model 3 控制器作为属性名-Controller as propertyName 4 依赖注入-Dependency injection 41 scope 5 模型视图控制器MVC-Model-view-controller 6 函数-Functions 7 回调函数 8 结论 声明 1. 前言 AngularJS是为了克服HTML在构建应用上的不足而设计的.HTML是一门很好的为

07模块化-AngularJS基础教程

0. 目录 目录 前言 正文 1 Why use Angular modules为什么使用模块化 2 创建应用模块-Creating the application module 3 加载应用模块-Loading the application module 4 定义控制器-Defining a controller 5 链式定义-Chaining definitions 6 加载模块-Loading modules 10 结论 声明 1. 前言 AngularJS是为了克服HTML在构建应用上