1. <!DOCTYPE html>
  2. <html lang="en" ng-app>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <title>Title</title>
  7.     <script type="text/javascript" src="./angular.js"></script>
  8. </head>
  9. <body>
  10.  <input type="text" ng-model="userName"/>
  11.  <div>您输入的内容是:<span>{{userName}}</span></div>
  12. </body>
  13. </html>

没有js代码的第一个helloworld

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <title>Title</title>
  7.     <script type="text/javascript" src="./jquery-2.2.3.min.js"></script>
  8.     <script type="text/javascript">
  9.      $(function(){
  10.          $("input:text").keyup(function(){
  11.            $("span").html($(this).val());
  12.          });
  13.      });
  14.  
  15.     </script>
  16. </head>
  17. <body>
  18.  <input type="text"/>
  19.  <div>您输入的内容是:<span></span></div>
  20. </body>
  21. </html>

用jq写的话

对比上面两个页面实现同样功能，让你开始对angularjs产生兴趣。。。。。。

一个例子入门 ng-app ,ng-controller , ng-model 指令

  1. var myApp = angular.module("myApp", []);
  2.  
  3. (function(app){
  4.     "use strict";
  5.     app.controller("MyController", function($scope, $http){
  6.         $scope.firstName='kobe';
  7.         $scope.lastName='bryant';
  8.         $scope.getName=function(){
  9.             return this.firstName+'-'+this.lastName;
  10.         }
  11.     });
  12. })(myApp);

自定义模块绑定普通作用域对象

  1. <html>
  2. <head>
  3.     <title>angular 演示</title>
  4.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  5.     <style>
  6.         span{
  7.             display:block;
  8.         }
  9.     </style>
  10. </head>
  11. <body ng-app="myApp">
  12.   <div ng-controller="MyController">
  13.    <input type="text" ng-model="firstName"/>
  14.       <span>firstName: {{firstName}}</span>
  15.    <input type="text" ng-model="lastName"/>
  16.       <span>lastName:{{lastName}}</span>
  17.       <span>{{getName()}}</span>
  18.   </div>
  19.  
  20. <script type="text/javascript" src="/statics/js/angular.js"></script>
  21. <script type="text/javascript" src="/statics/js/angularcontroller.js"></script>
  22. </body>
  23. </html>

演示html页面

AngularJS 启程的更多相关文章

  1. AngularJS 启程三

    <!DOCTYPE html> <html lang="zh_CN"> <head> <title>字数小例子</title& ...

  2. AngularJS 启程二

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> ...

  3. AngularJS标准Web业务流程开发框架—1.AngularJS模块以及启动分析

    前言: AngularJS中提到模块是自定义的模块标准,提到这不得不说AngularJS是框架中的老大哥,思想相当的前卫..在这框架满天横行的时代,AngularJS有些思想至今未被超越,当然仁者见仁 ...

  4. 通过AngularJS实现前端与后台的数据对接（二）——服务（service，$http）篇

    什么是服务? 服务提供了一种能在应用的整个生命周期内保持数据的方法,它能够在控制器之间进行通信,并且能保证数据的一致性. 服务是一个单例对象,在每个应用中只会被实例化一次(被$injector实例化) ...

  5. AngularJs之九（ending......)

    今天继续angularJs,但也是最后一篇关于它的了,基础部分差不多也就这些,后续有机会再写它的提升部分. 今天要写的也是一个基础的选择列表: 一:使用ng-options,数组进行循环. <d ...

  6. AngularJS过滤器filter-保留小数，小数点-$filter

    AngularJS      保留小数 默认是保留3位 固定的套路是 {{deom | number:4}} 意思就是保留小数点 的后四位 在渲染页面的时候 加入这儿个代码 用来精确浮点数,指定小数点 ...

  7. Angular企业级开发(1)-AngularJS简介

    AngularJS介绍 AngularJS是一个功能完善的JavaScript前端框架,同时是基于MVC(Model-View-Controller理念的框架,使用它能够高效的开发桌面web app和 ...

  8. 模拟AngularJS之依赖注入

    一.概述 AngularJS有一经典之处就是依赖注入,对于什么是依赖注入,熟悉spring的同学应该都非常了解了,但,对于前端而言,还是比较新颖的. 依赖注入,简而言之,就是解除硬编码,达到解偶的目的 ...

  9. 步入angularjs directive（指令）--点击按钮加入loading状态

    今天我终于鼓起勇气写自己的博客了,激动与害怕并存,希望大家能多多批评指导,如果能够帮助大家,也希望大家点个赞!! 用angularjs 工作也有段时间了,总体感觉最有挑战性的还是指令,因为没有指令的a ...

随机推荐

  1. C#_父窗体跟子窗体的控件操作

    很多人都苦恼于如何在子窗体中操作主窗体上的控件,或者在主窗体中操作子窗体上的控件.相比较而言,后面稍微简单一些,只要在主窗体中创建子窗体的时候,保留所创建子窗体对象即可. 下面重点介绍前一种,目前常见 ...

  2. Houdini Linux Crack

    安装 破解停止服务 /etc/init.d/sesinetd stop 刪除sesinetd | 拷贝破解文件sesinetd | 修改sesinetd的权限(读写权限) cd /usr/lib/se ...

  3. 如何在unity中使用龙骨动画

    龙骨 龙骨是Egret公司的一个用来做动画的软件,本文分享一下如何在Unity2D中使用龙骨导出的2D动画 导出动画 在龙骨中文件->导出,导出动画数据和纹理到Unity的项目中,如果打包了的话 ...

  4. React Router学习

    React Router教程 本教程引用马伦老师的的教程 React项目的可用的路由库是React-Router,当然这也是官方支持的.它也分为: react-router 核心组件 react-ro ...

  5. c#版flappybird 未完全实现

    这些天开始在深圳找工作,想着把从前有些淡忘的技术再温故下.看到尊敬的<传智播客>有一期公开课,讲的是用c#编写flappybird小游戏,也就自己搜了下游戏资源,也来试试看. 其实用到的技 ...

  6. Spring sprint @ ninth day

    时间 日期 地点 工作 20:05 5.20 九实 集成网络助手项目 遇到的困难:集成遇到,画了好久的rc文件,编译不了.rc文件也不能复制,还得重画.郁闷!!!

  7. 第一个spring，总结！

    陈志棚:界面跳转与框架 李天麟:游戏界面ui 徐侃:算法代码的设计 经过五天的时间,开会时候分配的任务,已经全部完成,在这期间中,我们遇到了一些问题.但是,经过android老师的指导后,app成功的 ...

  8. HDU 2088 Box of Bricks

    http://acm.hdu.edu.cn/showproblem.php?pid=2088 Problem Description Little Bob likes playing with his ...

  9. jmeter 获取执行脚本的路径

    需求:向jmeter.jmx 的路径下 写日志 : import org.apache.jmeter.services.FileServer; import com.bzj.utils.*; Stri ...

  10. Windows server 自带的 .net版本

    1. Win2012r2 所带的版本: 2. Win2016 所带的版本 4.6 Win2019 自带的 .net版本为: 4.7 4. 然后比较 Win2008r2sp1 使用的是 .net3.5 ...