1.angular之Hello World

<script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/271/qrv291et/angular.js"></script>
<body ng-app>

Your name: <input type="text" ng-model="yourname" placeholder="World">

<hr>

Hello {{yourname || ‘World‘}}!

</body>

MVVM说明

模板(Templates)

模板是您用HTML和CSS编写的文件,展现应用的视图。 您可给HTML添加新的元素、属性标记,作为AngularJS编译器的指令。 AngularJS编译器是完全可扩展的,这意味着通过AngularJS您可以在HTML中构建您自己的HTML标记!

应用程序逻辑(Logic)和行为(Behavior)

应用程序逻辑和行为是您用JavaScript定义的控制器。AngularJS与标准AJAX应用程序不同,您不需要另外编写侦听器或DOM控制器,因为它们已经内置到AngularJS中了。这些功能使您的应用程序逻辑很容易编写、测试、维护和理解。

模型数据(Data)

模型是从AngularJS作用域对象的属性引申的。模型中的数据可能是Javascript对象、数组或基本类型,这都不重要,重要的是,他们都属于AngularJS作用域对象。

AngularJS通过作用域来保持数据模型与视图界面UI的双向同步。一旦模型状态发生改变,AngularJS会立即刷新反映在视图界面中,反之亦然。

时间: 2024-12-29 07:21:06

1.angular之Hello World的相关文章

angular中模板

<!DOCTYPE html><!--调用模块--><html lang="en" ng-app="myApp"><head> <meta charset="UTF-8"> <script src="js/angular.js"></script> <title>Title</title></head><

利用angular打造管理系统页面

1 创建一个新的angular应用 ng new adminSystem 2 利用WebStorm打开adminSystem应用 3 借助AdminLTE这个开源项目来辅助开发 AdminLTE项目:点击前往 将AdminLTE项目的精简版本源代码复制到adminSystem应用主模块的主组件的模板中 AdminLTE项目的精简版本效果图 <!DOCTYPE html> <!-- This is a starter template page. Use this page to star

Angular基础(二) 组件的使用

? 一.简单操作 a) 使用Angular CLI可以快速创建项目框架,先运行 $ npm install –g @angular/[email protected]安装CLI,为CLI的位置设置环境变量,然后就可以全局使用ng命令了. 执行ng new –ng4 angular-hello-world可以创建Angular4项目,会自动生成基础的文件夹和文件,还会自动进行npm i操作,下载并安装所需的依赖. 然后执行ng serve就可以编译并启动这个程序了,但ng并不会自动打开浏览器. b

Angular 2基础(一) 环境搭建

Angular2是一款开源JavaScript库,由Google维护,用来创建页面应用程序.正式发布于2016年9月,基于ES6开发. 一.准备工作 使用Angular2开发,需要预先做一些配置上的配置,如NPM.Node.Js.Git等,还要对TypeScript有个大概的了解. a)NPM是随同NodeJS一起安装的包管理器,那应该类似NuGet的作用了.NPM集成在了NodeJS安装包,可以一起安装,在CMD输入npm –v和node –v可以验证是否已安装. b)TypeScript则是

angular踩坑之路:初探webpack

之前费了一番力气安装好了angular开发环境,后面的几天都是在angular中文官网上看文档,照着英雄教程一步一步操作,熟悉了angular的一些基本特性,这部分没有遇到什么大问题,还比较顺利.这两天在看官方文档中的Webpack简介,想跟着文档做一遍,了解一下如何用Webpack打包angular项目,结果遇到了一些问题,因为是初学angular和Webpack的小白,这些问题一时难以解决,花费了不少时间,想在这里记录一下. 首先跟着文档将相关的文件都添加到项目中,目录是这样子的: 根据文档

angular参考手册拷贝

AngularJS 参考手册 AngularJS 指令 本教程用到的 AngularJS 指令 : 指令 描述 ng-app 定义应用程序的根元素. ng-bind 绑定 HTML 元素到应用程序数据 ng-bind-html 绑定 HTML 元素的 innerHTML 到应用程序数据,并移除 HTML 字符串中危险字符 ng-bind-template 规定要使用模板替换的文本内容 ng-blur 规定 blur 事件的行为 ng-change 规定在内容改变时要执行的表达式 ng-check

angular 动画

ngAnimate 做了什么? ngAnimate 模型可以添加或移除 class . ngAnimate 模型并不能使 HTML 元素产生动画,但是 ngAnimate 会监测事件,类似隐藏显示 HTML 元素 ,如果事件发生 ngAnimate 就会使用预定义的 class 来设置 HTML 元素的动画. AngularJS 添加/移除 class 的指令: ng-show ng-hide ng-class ng-view ng-include ng-repeat ng-if ng-swit

angular.copy和angular.extend

angular.copy用于深复制,而angular.extend用于拓展.     angular.copy(src,[dst]) src:源对象 dst:目标对象,复制的对象 js中 '= '操作符复制的是指针,所以前后两个变量指向的还是内存中的同一个对象,所以在其中一个变量上操作该对象时,对另外一个变量也会生效.而angular.copy方法是深复制,会在内存中再生成一个对象,两个变量彼此独立,互不影响. 接收一个必须参数src,一个可选参数dst.如果dst没有提供,就会创建对象或者数组

.Net Core + Angular Cli 开发环境搭建

一.基础环境配置 1.安装VS 2017 v15.3或以上版本 2.安装VS Code最新版本 3.安装Node.js v6.9以上版本 4.重置全局npm源,修正为 淘宝的 NPM 镜像: npm install -g cnpm --registry=https://registry.npm.taobao.org 5.安装TypeScript cnpm install -g typescript typings 6.安装 AngularJS CLI cnpm install -g @angul

Angular this vs $scope

this vs $scope ------------------------------------------------------------------------------ 'this' vs $scope in AngularJS controllers How does this and $scope work in AngularJS controllers? Short answer: this When the controller constructor functio