AngularJS初始(一)

  什么是AngularJs?

  angularjs是一个为动态WEB应用设计的结构框架。它能让你使用HTML作为模板语言,通过扩展HTML的语法,让你能更清楚、简洁地构建你的应用组件。它的创新点在于,利用数据绑定依赖注入,它使你不用再写大量的代码了。这些全都通过浏览器端的javascript实现,这也使得它能够完美地和任何服务器技术结合。

  AngularJS简单的Helloworld例子:

<!DOCTYPE HTML>
<!-- 告诉AngularJs引擎从这里开始是ng-app管理 -->
<html lang="en-US" ng-app>
<head>
    <meta charset="UTF-8">
    <title>AngularJS例子</title>
</head>
<body>
    <!-- ng-model数据模型 -->
    <input type="text" ng-model=‘name‘ placeholder="yourname" />
    <!-- {{}}angular表达式 -->
    <h1>Hello {{name}}</h1>
    <script type="text/javascript" src=‘http://cdn.staticfile.org/angular.js/1.3.0-beta.13/angular.min.js‘></script>
</body>
</html>

这个例子其实展示了angularjs的数据双向绑定,

  左边为数据单向绑定图解,通常是要你管jquery,backbone这类框架,     右边为angularjs数据双向绑定。

时间: 2025-01-01 08:34:24

AngularJS初始(一)的相关文章

angularjs的ng-options时如何设置默认值(初始值)

hhtml: <select ng-change="change2()" ng-model="selected" ng-options="item.id for item in datas"></select> angualrJs: $http.get('url').then(function (res) { $scope.datas= res.data; $scope.selected= $scope.datas[0];

AngularJS tips-2 初始篇

1var phonecatApp = angular.module('phonecatApp', []);  //在js中创建自定义模块phonecatApp根模块,在<html lang="en" ng-app="phonecatApp">加载. 2phonecatApp.controller('PhoneListCtrl', function($scope) {}  //在<body ng-controller="PhoneListC

前端angularJS利用directive实现移动端自定义软键盘的方法

最近公司项目的需求上要求我们iPad项目上一些需要输入数字的地方用我们自定义的软键盘而不是移动端设备自带的键盘,刚接到需求有点懵,因为之前没有做过,后来理了一下思路发现这东西也就那样.先看一下实现之后的效果: 实现的效果就是当点击页面中需要弹出软键盘的时候软键盘弹出,浮在页面的中间,和模态框一样的效果,可以在软键盘中输入任何数字,附带的功能有小数点.退格.清空.确定等功能.当在键盘上点击数字的时候页面中的表单中实时的添加对应的数字,上图中可以看到. 产品经理那边给的原因是iPad屏幕本来就小,如

angularJs项目实战!01:模块划分和目录组织

近日来我有幸主导了一个典型的web app开发.该项目从产品层次来说是个典型的CRUD应用,故而我毫不犹豫地采用了grunt + boilerplate + angularjs + bootstrap + D3 + requirejs 的架构来实现它.angularjs早在去年6月份我就有所接触,将它应用在实验室项目的个别页面中,11月份在新浪的时候也将其推荐给了所在云事业部项目组.项目组老大程辉等人都是很有技术敏感性的人,大胆地采纳了我的建议,将之应用于原本使用dojo开发的项目前端模块上.然

Angularjs基础(七)

AngularJS表单 AngularJS表单时输入控件的集合HTML控件 一下HTML input 元素被称为HTML 控件: input 元素 select元素 button元素 textarea元素 HTML 表单 AngularjS表单上实例 <div ng-app="myApp" ng-controller="formCtrl"> <from novalidate> First Name: <input type="

AngularJs选项卡的不同写法

AngularJs选项卡的写法有很多,每个人都会有自己的一个写法,今天我来给大家展示两种不同写法的AngularJs选项卡! 方法一: 1.创建选项卡,我是在控制器里创建数组将其渲染在页面上: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>选项卡1</title> <style> #ul{

angularJS 学习之路

AngularJS 通过 ng-directives 扩展了 HTML. ng-app 指令定义一个 AngularJS 应用程序.也就是angularjs作用的入口  作用在什么标签或者整个body内部 ng-model 指令把元素值(比如输入域的值)绑定应用程序数据到 HTML 控制器(input, select, textarea).双向绑定 ng-bind 指令把应用程序数据绑定到 HTML 视图.多用于显示内容常用span标签 ng-init 指令初始化 AngularJS 应用程序变

AngularJS(1)

在讲正题之前,先说一下有关angular简介方面的信息: 1. angularJS  诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.AngularJS有着诸多特性,最为核心的是:MVC.模块化.自动化双向数据绑定.语义化标签.依赖注入等等. 2. AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 HTML 页面. 3. AngularJS 通过 指令 

学习AngularJs:Directive指令用法(完整版)

这篇文章主要学习AngularJs:Directive指令用法,内容很全面,感兴趣的小伙伴们可以参考一下 本教程使用AngularJs版本:1.5.3 AngularJs GitHub: https://github.com/angular/angular.js/ AngularJs下载地址:https://angularjs.org/ 摘要:Directive(指令)笔者认为是AngularJ非常强大而有有用的功能之一.它就相当于为我们写了公共的自定义DOM元素或LASS属性或ATTR属性,并