angularJs

来源：互联网发布：手机淘宝怎样撤销投诉编辑：程序博客网时间：2024/04/30 21:26

目录
一数据定义与引用逻辑
- - 定义函数
  - 定义模型
  - 定义控制器
  - html使用script语句的两种方法
  - js文件获取html页面录入的值在js文件里定义
  - js文件获取html页面录入的值在js文件里定义
  - html获取js文件里的值
  - html页面调用angular函数
  - Cookie用法跨页面传数据
  - 过滤器
  - 合并对象
- 快捷键
- Markdown及扩展
  - 表格
  - 定义列表
  - 代码块
  - 脚注
  - 目录
  - 数学公式
  - UML 图
- 离线写博客
- 浏览器兼容

一、数据定义与引用逻辑

定义数组:

一维数组: var arr = new Array('William','aWilliam','abWilliam');//数组初始化二维数组: var arr=[{id:"001",name:"上海"},{id:"002",name:"北京"}];删除数组值:arr.splice(0,2);//从0项开始,删除后面的2个值.增加数组值:arr.splice(0,1,"name1","name2");//从0项开始删除1个值(William)后,跟随插入值name1和name2.获取数组值:a=arr[0].name,a 的值为”上海”;arr.pop();//这里是删除数组的最后一个元素concat(otherArray) 将数组的内容和数据指定的参数链接起来 返回数组join(,)将数组元素加上,号，然后连接起来，返回字符串slice(start,end)返回数组的一部分sort()排序数组中的成员unshift(item)类似push 从开头插入元素

定义函数：

Angular函数:方式1:$scope.totalPrice=function(){        return 1000;}方式2:function totalPrice ($scope) {       return 1000;}$scope.getCountry = function (city) {                    switch (city) {                        case "London":                            return "UK";                        case "New York":                            return "USA";                    }                }

定义模型:

var mymodule = angular.module("mymodule", []);module对象    animation(name,factory)支持动画特性    config(callback) 注册一个在模块加载时对该模块配置的函数    constant('name', value)定义一个返回常量的服务    controller(name,constructor)创建一个控制器    directive(name,factory)创建一个指令    factory(name provider)创建一个服务    filter()创建过滤器    provider()    name返回模块名称    run(callback)注册一个在angularjs加载完毕后对所有模块进行配置的函数    service('name', ['', function(){}])创建一个服务    value('name', value)返回一个常量的服务

定义控制器:

mymodule.controller('mycontroller', ['$scope', function($scope){  }]);无作用域控制器：    <script>        var app = angular.module("exampleApp", [])            .controller("simpleCtrl", function () {                this.dataValue = "Hello, Adam";                this.reverseText = function () {                    this.dataValue = this.dataValue.split("").reverse().join("");                }            });    </script></head>    <div class="well" ng-controller="simpleCtrl as ctrl"> //需要指定代名词        <h4>Top Level Controller</h4>        <div class="input-group">            <span class="input-group-btn">                <button class="btn btn-default" type="button"                        ng-click="ctrl.reverseText()">Reverse</button> //需要通过代名词引用            </span>            <input class="form-control" ng-model="ctrl.dataValue">        </div>    </div>

html使用script语句的两种方法:

1)页面中直接引用:<html><script type="text/javascript">代码</script></html>;2)引用js文件,在js文件里填写代码,但不需要<script></script>括起来:<script src="js/myjs.js" type="text/javascript"></script>

js文件获取html页面录入的值（在js文件里定义）:

var a=document.getElementById("first").value; var body = document.getElementsByTagName('body')[0];

js文件获取html页面录入的值（在js文件里定义）:

var a=document.getElementById("first").value; var body = document.getElementsByTagName('body')[0];

html获取js文件里的值:

1)在js里直接定义html的值:js: function show(){document.getElementById("three").value="name";document.getElementById("foure").innerHTML = "<h1>name2</h1>";}html: <input id="three" type="text" onclick="show()"></input> //通过调用js函数show(),value会显示为name.备注:Button、CheckBox、Radio(Reset、Submit)标签;(Text、Hidden)默认值;(File、Password、Text控件用value有效)。td、div等html元素,没有value/text属性,只能用innerHtml;

html页面调用angular函数

js：$scope.show1=function(a){            a=2000;            alert(a);        }Html：<input type="text" ng-click="show1()">2)通过html调用module下controller的值{{}},但必须使用$scope先把值传到孤岛(缓冲区):Js: var mymodule = angular.module("mymodule", []);    mymodule.controller('mycontroller', ['$scope', function($scope){        var arr=[{id:"001",name:"上海"},{id:"002",name:"北京"}];        $scope.freetrial =arr;    }]);Html: <body ng-app="mymodule"><div id="aaa" ng-controller="mycontroller"><span>{{freetrial[0].name}}</span><span ng-bind="freetrial[0].name"></span><span ng-repeat="(key, value) in freetrial">{{value.id}}</span></div></body>Html调用angular的js函数：Js：$scope.totalPrice=function(){        return 1000;}Html：<th ng-bind="totalPrice()"></th>

Cookie用法(跨页面传数据):

设置cookie: fac.setCookie("gradeName",gradeName);引用cookie: a = fac.getCookie("gradeName");

过滤器

<p><input type="text" ng-model="test"></p><ul>  <li ng-repeat="x in names | filter:test | orderBy:'country'">    {{ (x.name | uppercase) + ', ' + x.country }}  </li></ul>

控制器获取repeat的值parent.conf[index]:

<tbody ng-repeat="param in params"> <tr>   <td>{{param}}</td>   <td><input name="test" class="form-control" type="text" ng-trim="false" ng-model="$parent.conf[$index]"/></td></tr></tbody>

合并对象

$.extend({height: $scope.tableHeight},$scope.TableOption);

LaTex数学公式
UML序列图和流程图
离线写博客
导入导出Markdown文件
丰富的快捷键

快捷键

加粗 Ctrl + B
斜体 Ctrl + I
引用 Ctrl + Q
插入链接 Ctrl + L
插入代码 Ctrl + K
插入图片 Ctrl + G
提升标题 Ctrl + H
有序列表 Ctrl + O
无序列表 Ctrl + U
横线 Ctrl + R
撤销 Ctrl + Z
重做 Ctrl + Y

Markdown及扩展

Markdown 是一种轻量级标记语言，它允许人们使用易读易写的纯文本格式编写文档，然后转换成格式丰富的HTML页面。 —— [ 维基百科 ]

使用简单的符号标识不同的标题，将某些文字标记为粗体或者斜体，创建一个链接等，详细语法参考帮助？。

本编辑器支持 Markdown Extra , 　扩展了很多好用的功能。具体请参考Github.

表格

Markdown　Extra　表格语法：

项目价格 Computer $1600 Phone $12 Pipe $1

可以使用冒号来定义对齐方式：

项目价格数量 Computer 1600 元 5 Phone 12 元 12 Pipe 1 元 234

定义列表

Markdown　Extra　定义列表语法：
项目１
项目２: 定义 A; 定义 B
项目３: 定义 C; 定义 D

定义D内容

代码块

代码块语法遵循标准markdown代码，例如：

@requires_authorizationdef somefunc(param1='', param2=0):    '''A docstring'''    if param1 > param2: # interesting        print 'Greater'    return (param2 - param1 + 1) or Noneclass SomeClass:    pass>>> message = '''interpreter... prompt'''

脚注

生成一个脚注1.

目录
一数据定义与引用逻辑
- - 定义函数
  - 定义模型
  - 定义控制器
  - html使用script语句的两种方法
  - js文件获取html页面录入的值在js文件里定义
  - js文件获取html页面录入的值在js文件里定义
  - html获取js文件里的值
  - html页面调用angular函数
  - Cookie用法跨页面传数据
  - 过滤器
  - 合并对象
- 快捷键
- Markdown及扩展
  - 表格
  - 定义列表
  - 代码块
  - 脚注
  - 目录
  - 数学公式
  - UML 图
- 离线写博客
- 浏览器兼容

数学公式

使用MathJax渲染LaTex 数学公式，详见math.stackexchange.com.

行内公式，数学公式为：Γ(n)=(n−1)!∀n∈N。
块级公式：

x = - b \pm b 2 - 4 a c - - - - - - - \sqrt 2 a

更多LaTex语法请参考这儿.

UML 图:

可以渲染序列图：

或者流程图：

关于 序列图 语法，参考这儿,
关于 流程图 语法，参考这儿.

离线写博客

即使用户在没有网络的情况下，也可以通过本编辑器离线写博客（直接在曾经使用过的浏览器中输入write.blog.csdn.net/mdeditor即可。Markdown编辑器使用浏览器离线存储将内容保存在本地。

用户写博客的过程中，内容实时保存在浏览器缓存中，在用户关闭浏览器或者其它异常情况下，内容不会丢失。用户再次打开浏览器时，会显示上次用户正在编辑的没有发表的内容。

博客发表后，本地缓存将被删除。　

用户可以选择把正在写的博客保存到服务器草稿箱，即使换浏览器或者清除缓存，内容也不会丢失。

注意：虽然浏览器存储大部分时候都比较可靠，但为了您的数据安全，在联网后，请务必及时发表或者保存到服务器草稿箱。

浏览器兼容

目前，本编辑器对Chrome浏览器支持最为完整。建议大家使用较新版本的Chrome。
IE９以下不支持
IE９，１０，１１存在以下问题
1. 不支持离线功能
2. IE9不支持文件导入导出
3. IE10不支持拖拽文件导入

这里是脚注的内容. ↩

0 0

angularJs

目录

一、数据定义与引用逻辑

定义函数：

定义模型:

定义控制器:

html使用script语句的两种方法:

js文件获取html页面录入的值（在js文件里定义）:

js文件获取html页面录入的值（在js文件里定义）:

html获取js文件里的值:

html页面调用angular函数

Cookie用法(跨页面传数据):

过滤器

合并对象

快捷键

Markdown及扩展

表格

定义列表

代码块

脚注

目录

数学公式

UML 图:

离线写博客

浏览器兼容