angularjs学习笔记--1.入门

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

AngularJS 是以一个 JavaScript 文件形式发布的,可通过 script 标签添加到网页中:<script src="angular.js"></script>

AngularJS 通过指令扩展了 HTML,且通过表达式绑定数据到 HTML。

AngularJS 扩展了 HTML

AngularJS 通过 ng-directives 扩展了 HTML。

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

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

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

angularjs实例:

<!DOCTYPE html>
<html>
<body>

    <div ng-app="">
      <p>在输入框中尝试输入:</p>
      <p>姓名:<input type="text" ng-model="name"></p>
      <p ng-bind="name"></p>
    </div>

    <script src="angular.js"></script>

</body>
</html>

实例讲解:

当网页加载完毕,AngularJS 自动开启。

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

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

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

时间: 2024-10-29 19:05:55

angularjs学习笔记--1.入门的相关文章

AngularJs学习笔记1——入门知识

1.什么是AngularJs          AngularJs 诞生于2009年,由Misko Hevery 等人创建,后被Google收购,是一个优秀的Js框架,用于SPA(single page application)适用于以数据操作比较频繁的应用程序. 2.AngularJs的四大特性 ①采用MVC设计模式 ②双向数据绑定 ③依赖注入 ④模块化设计 主要从这四个特性出发学习AngularJs的应用.但是前提是要先明白AngularJs的表达式和指令,不先学变量,怎么去写函数. 3.表

现代C++学习笔记之一入门篇:智能指针(C++ 11)

原始指针:通过new建立的*指针 智能指针:通过智能指针关键字(unique_ptr, shared_ptr ,weak_ptr)建立的指针 在现代 C++ 编程中,标准库包含智能指针,该指针用于确保程序不存在内存和资源泄漏且是异常安全的. 在现代 C++ 中,原始指针仅用于范围有限的小代码块.循环或者性能至关重要且不会混淆所有权的 Helper 函数中. 1 void UseRawPointer() 2 { 3 // Using a raw pointer -- not recommended

angularjs学习笔记—事件指令

angularjs学习笔记—事件指令 小俞 4.4k 3月30日 发布 推荐 4 推荐 收藏 17 收藏,11.1k 浏览 ngClick 适用标签:所有触发条件:单击 #html <div ng-controller="LearnCtrl"> <div ng-click="click()">click me</div> <button ng-click="click()">click me<

springmvc学习笔记(5)-入门程序小结

springmvc学习笔记(5)-入门程序小结 springmvc学习笔记5-入门程序小结 入门程序配置小结 非注解的完整的配置文件 注解的完整配置文件 通过入门程序理解springmvc前端控制器.处理器映射器.处理器适配器.视图解析器用法.并附上入门程序的非注解的完整的配置文件,注解的完整配置文件. 入门程序配置小结 前端控制器配置: 第一种:*.action,访问以.action结尾 由DispatcherServlet进行解析 第二种:/,所以访问的地址都由DispatcherServl

angularjs 学习笔记(一) -----JSONP跨站访问

1.  下载angular-seed-master-master包,解压缩后将新版本的angularJS文件放入其中. 2.  制作frontmockup文件夹(前端调用),同时制作backmockup文件夹(后端调用),使用IIS开启2个webserver(此步骤可以用其他方式替代). 3.  backmockup站点添加以下HTTP头 Access-Control-Allow-Credentials:true Access-Control-Allow-Headers:origin,x-req

angularjs 学习笔记 -----结构定义

1.  Module使用方法 var APP =angular.module('fontApp',['ngResource', 'ngRoute', 'ngSanitize']); APP为定义的别名,之后的调用都应尽量使用该别名 'fontApp' ng-app="fontApp" 新版本angular中route被分离出来,各个被使用的Providerdou需要在此处声明. 大型应用应该拆分模块来做,先定义一个服务模块,然后再加载它 angular.module('xmpl.ser

angularjs 学习笔记(二) ----- bootstrap框架

1.  下载新的jquery-1.11.1文件. 2.  下载新的bootstrap文件. 3.  选择流式布局的模板填充入index.html文件. 4.  将top.foot转为nginclude文件 nginclude必须使用$scope对象,因此需要设置一个全局的mainctrl来将字符串或全局变量注入$cope中. $rootScope.global =global; 直接将全局变量global赋值给$rootScope,并且之后的子$Scope会获得继承,静态定义与ctrl分开. 5

-_-#AngularJS学习笔记

AngularJS学习笔记 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <style> .done{display:none} .ignore{color:#999} </style> <ul> <li class="

AngularJs学习笔记--directive

原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directives匹配HTML并执行.这允许directive注册行为或者转换DOM结构. Angular自带一组内置的directive,对于建立Web App有很大帮助.继续扩展的话,可以在HTML定义领域特定语言(domain specific language ,DSL). 一.在HTML中引用direc