angular-tutorial

angular-tutorial copied to clipboard

**发送事件**可以用 向父控制器传递信息 `$scope.$emit('name', 'args');` 或者是 向子控制器传递信息 `$scope.$broadcast('name', 'args');` name:事件的名字 args:事件所需要传递的参数 **接受事件**可以用（仅此一个方法可以接受事件） ```js 接受来自于子或父传来的信息 $scope.$on('name',function(event,data){ //从$emit或者$broadcast中获取的args事件传递来的信息 }) ``` 例子如下 注意 bodyCtrl为indexCtrl的父 indexChildCtrl为indexCtrl的子 ```html {{name}} Ok {{name}} {{name}} var app = angular.module('wsscat',...

Wscats

angular下拉刷新

6

注意这里要固定列表的高度 在组件directive中，通过获取attr的属性值中的方法名 `scope.$apply(attr.whenScrolled)`可以执行`when-scrolled="loadMore()"`中的loadMore函数 ``` li { /*height: 120px;*/ border-bottom: 1px solid gray; } #fixed { height: 500px; overflow: auto; } {{item}} var app = angular.module('wsscat', []); app.controller('indexCtrl', function($scope) { $scope.items...

Wscats

# 安装 基于 Angular Quickstart，使用 Git 克隆 quickstart 项目，安装项目所需依赖并验证环境是否搭建成功 ```js git clone https://github.com/angular/quickstart ng4-quickstart cd quickstart ng4-quickstart npm i npm start ``` # 定义组件 在app文件夹里面新建components文件夹，在里面新建`user.component.ts`  ```ts import { Component...

Wscats

## 参考文档 - [官方文档Angular4和Webpack配置](https://angular.io/guide/webpack) - [Angular之路--带你来搭建Webpack 2 + Angular 4项目](https://juejin.im/post/58ec25655c497d0062c3493b)

Wscats

# 方案1 加上这个模块，这里改写了**$httpProvider**服务 ```javascript angular.module('MyModule', [], function($httpProvider) { // Use x-www-form-urlencoded Content-Type $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8'; /** * The workhorse; converts an object to x-www-form-urlencoded serialization. * @param {Object} obj *...

Wscats

[angular.js指令(directive)中的controller,compile,link函数有什么不同?](http://blog.csdn.net/baidu_24024601/article/details/52710331)

Wscats

ionic总结

1

移动端开发必备的一句话 `` 引入js文件和ionic的bundle文件，bundle文件里面包含了angular框架 ``` ``` 如果你只使用样式不使用组件的话，那就不用写`var app = angular.module("wsscat",["ionic"])`，相反用组件就一定要加上去 ## ion-content 设置一个可以滚动的内容区域 ``` 我的第一个 ionic 应用。 配合固定的头部``，让内容框可以滚动可以这样写 `` 如果不让内容框滚动则这样写 `` ``` ## 下拉刷新 让ion-content拥有下拉刷新的滚动视图 ``` ``` ## ion-list 下拉刷新完后我们可以用ion-list ```...

Wscats

比如下面这行代码，实际上引入了两个**angular.js**和**ionic.js**，这样会引发致命错误，Angular程序只能引入一个**angular.js**，因为**ionic.bundle.js**本身就包含了**angular.js**和**ionic.js** ``` ``` 导致**ng-repeat**失效 ``` ```

Wscats

## 生成项目并添加组件 安装淘宝镜像 ``` npm install -g cnpm --registry=https://registry.npm.taobao.org ```  安装angular2脚手架 ``` cnpm install -g angular-cli@latest ```  这个命令为我们新建了一个名为`hello-angular`的工程 ``` ng new hello-angular ```  生成一个hello-angular文件夹，进入文件夹 ``` cd hello-angular...

Wscats

ui-route和ng-route

3

# ui路由 ## 引入JS文件 开始引入angular和ui-route的js文件 ``` ``` 与原生angular不同的是，ui路由用**ui-view**而不是**ng-view** `` 在angular服务中注入**ui.router** `var app = angular.module('wsscat', ['ui.router']);` ## 配置路由 ``` 用到**$stateProvider**和**$urlRouterProvider**两个服务 /* 注入$stateProvider，$urlRouterProvider */ app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) { /* 使用when来对一些不合法的路由进行重定向 */...

Wscats