AngularJs实战学习(-)

AngularJs学习有一段时间了,前几天做了一项目。做完后想使用才学习的Angular试试水,结果出乎意料(学的太基础尽然不知道从那下手,还是纠结)

最后还是去慕课网看了“大漠穷秋”的“AngularJS实战”的视频才有些基础,希望能让我理解其中的知识。

1、Angular的4大核心特性:

MVC(职责清晰,代码模块化)

模块化(MVC是手段,终极目标是模块化)

指令系统(AngularJs不会去直接去操作Dom,都是使用指令系统去处理Dom)

双向数据绑定

angularJs特有的指令系统和双向数据绑定

2、在讲了4大核心的东西后花了很大的篇幅去讲现在做前端开发需要的环境,有需要的可以去看一下链接

3、controller(控制器)的使用过程中的注意点

1.不要试图去复用Controller,一个控制器一般只负责一小块视图;

2.不要在Controller中操作DOM,这不是控制器的责任(使用指令系统);

3.不要在Controller里面做数据格式化,ng有很好的表单控件;

4.不要在Controller里面做数据过滤操作,ng有¥filter服务;

5.一般来说,Controller是不会互相调用,控制器直接交互回通过事件进行;

4、路由

路由是控制器一个很重要的功能;

使用angular的路由功能需要安装routing模块...(引入angular-route.js就可以了)

定义:使用路由非常容易,在我们的应用mian模块里面注入ngRoute依赖就可以了

var bookStoreApp = angular.module(‘bookStoreApp‘, [
    ‘ngRoute‘, ‘ngAnimate‘, ‘bookStoreCtrls‘, ‘bookStoreFilters‘,
    ‘bookStoreServices‘, ‘bookStoreDirectives‘
]);

bookStoreApp.config(function($routeProvider) {
    $routeProvider.when(‘/hello‘, {
        templateUrl: ‘tpls/hello.html‘,
        controller: ‘HelloCtrl‘
    }).when(‘/list:id‘,{
        templateUrl:‘tpls/bookList.html‘,
        controller:‘BookListCtrl‘
    }).otherwise({
        redirectTo: ‘/hello‘
    })
});

routeProvider只有两个方法分别是when()otherwise()

  when()

when()方法有两个参数,我们希望匹配的浏览器url和路由操作对象。一般main route经常使用“/”来表示,也可以定义URL参数,在controller里面就使用$routeParams获取url参数。

  • templateUrl: 表示路由跳转的view模板
  • controller: 控制器

otherwise()

otherwise()定义了当应用找不到指定路由的时候跳转的路由

时间: 2024-11-03 05:26:08

AngularJs实战学习(-)的相关文章

AngularJS入门学习笔记一

首先声明: 本博客源自于学习:跟我学AngularJs:AngularJs入门及第一个实例.通过学习,我自己的一些学习笔记. 1.AngularJS的一些基本特性 (1)使用双大括号{{}}语法进行数据绑定: (2)使用DOM控制结构来实现迭代或者隐藏DOM片段: (3)支持表单和表单的验证: (4)能将逻辑代码关联到相关的DOM元素上: (5)能将HTML分组成可重用的组件. 他是MVC结构的,有双向数据绑定的特点.下图是双向数据绑定的图解: 使用DOM作为输入,而不是字符串,是Angular

AngularJS交互学习教程推荐

0.目录 目录 预览 详述 1 Learn Angular 2 AngularJS入门教程 感悟 声明 1.预览 急着赶时间,没有时间听我废话的同学,直接看今天推荐的两个AngularJS交互学习教程. CodeCademy的LearnAngularJS Fenby的AngularJS入门教程 2.详述 许多研究表明,探究式学习.游戏式学习是较为高效的学习方式,编程语言学习更是如此.正如看电影和玩游戏的区别,你在看电影的时候,你完全处于被动的.接受内容状态,而玩游戏则全然不同,你会和计算机有交互

angularjs入门学习【指令篇】

一.首先我们来了解下指令API 属性 含义 restrict 申明标识符在模版中作为元素,属性,类,注释或组合,如何使用 priority 设置模版中相对于其他标识符的执行顺序 Template 指定一个字符串式的内嵌模版,如果你指定了模版是一个URL,那么是不会使用的 tempateUrl 指定URL加载的模版,如果你已经指定了内嵌的模版字符串,那么它不会使用的 Replace 如果为真,替换当前元素,如果是假或未指定,拼接到当前元素 Transclude 移动一个标识符的原始字节带你到一个新

osgi实战学习之路:8. Service-3之ServiceTracker

通过ServiceTracker可以对查找的Service进行扩展 下面的demo引入装饰器模式对Service进行日志的扩展 demo: Provider student-manage/Activator.java package com.demo.service; import java.util.Dictionary; import java.util.HashMap; import java.util.Hashtable; import java.util.Map; import org

osgi实战学习之路:5.生命周期及利用命令、装饰者模式实现基于socket交互Bundle命令demo

生命周期中关键3个类: BundleActivator 入口点,类似main方法 BundleContext Bundle上下文对象,在运行期间,为应用程序提供操作osgi框架的方法 Bundle 代表一个已安装的Bundle 接口说明: BundleActivator: public interface BundleActivator { public void start(BundleContext context) throws Exception; public void stop(Bu

《Pro AngularJS》学习小结-01

<Pro AngularJS>该书以一个SportsStore案例为主线铺开. 一.开发环境设置 该书中所用的server开发环境是Deployed,从来没听说过,而且作者也说该server没什么人用,我干脆弃用之.其他的环境包括 NodeJS--这个必须装 karma--测试环境,前期还没有用到,以后认真研究,毕竟AngularJS一大特点是Unit Test bootstrap--这个现在应该普遍使用了,O(∩_∩)O webstorm--现在唯一支持AngularJS插件的IDE 我基本

osgi实战学习之路:6. Service-1

什么是Service? 它是注册到osgi的一个java对象 Service注册: 通过BundleContext::registerService(java.lang.String[] clazzes, java.lang.Object service, java.util.Dictionary properties)  Service查找及使用: 通过BundleContext::getServiceReference(java.lang.String clazz),返回ServiceRef

机器学习实战学习笔记(一)

1.k-近邻算法 算法原理: 存在一个样本数据集(训练样本集),并且我们知道样本集中的每个数据与其所属分类的对应关系.输入未知类别的数据后将新数据的每个特征与样本集中数据对应的特征进行比较,然后算法提取样本集中特征最相似(最近邻)的k组数据.然后将k组数据中出现次数最多的分类,来作为新数据的分类. 算法步骤: 计算已知类别数据集中的每一个点与当前点之前的距离.(相似度度量) 按照距离递增次序排序 选取与当前点距离最小的k个点 确定k个点所在类别的出现频率 返回频率最高的类别作为当前点的分类 py

osgi实战学习之路:7. Service-2之ServiceListener

ServiceListener三种状态: ServiceEvent.REGISTERED ServiceEvent.MODIFIED ServiceEvent.UNREGISTERING 基于ServiceListener实现服务查找的demo Provider student-manage/Activator.java package com.demo.service; import java.util.Dictionary; import java.util.HashMap; import