`
sillycat
  • 浏览: 2540904 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

AngularJS(1)Introduction and Follow PhoneCat Demo

    博客分类:
  • UI
 
阅读更多

AngularJS(1)Introduction and Follow PhoneCat Demo

1. Build and Prepare
I can get the resource from here
>git clone https://github.com/angular/angular.js.git
>cd angular.js
>npm install
This will install all the packages we need.

I may already have grunt-cli
>sudo npm install -g grunt-cli

Build the Angular
>grunt package

Start the web Server
>grunt webserver
Visit http://localhost:8000 to verify.

The Unit Test Suite is written with Jasmine and executed with Karma
>grunt test:unit

Specify the browsers
>grunt test:unit --browsers Opera,Firefox 

Run the command 
>grunt autotest:jqlite

Just modify the source, the auto test will happen itself.

And for more information
>grunt --help

Running the end-to-end Test Suite
>grunt webserver
>grunt test:end2end
or
>grunt test:e2e
or
Visit http://localhost:8000/build/docs/docs-scenario.html

2. First Step of Angular
First Example
<!doctype html>

<html ng-app> 

  <head>   

  <script   src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.min.js">

  </script> 

  </head> 

  <body>   

    <div>

      <label>Name:</label>       

      <input type="text" ng-model="name" placeholder="Enter a name here">        

      <hr>       

      <h1>Hello {{name}}!</h1>   

    </div> 

  </body>

</html>

ng-app, ng-model, {{ }}

Introduction of Bower
>node -v
v0.10.22

>npm -v
1.3.23

Update the NPM
>sudo npm update npm -g

Update the NodeJS
Find the package here and install it http://nodejs.org/download/

node  v0.10.22
npm   1.3.23

Start the example from here
https://github.com/daliworks/angular-require-bootstrap-seed

Install bower
>sudo npm install bower -g
>bower -v
1.2.8

>bower help

Check the package List
>bower list

Install the package I need.
>bower install

Start the Server and begin the debugging
>grunt server

Deployment
>grunt build

Error Message:
INFO [karma]: Karma server started at http://localhost:9876/INFO [launcher]: Starting browser ChromeCanary ERROR [launcher]: Cannot start ChromeCanary Can not find the binary /Applications/Google Chrome Canary.app/Contents/MacOS/Google Chrome Canary Please set env variable CHROME_CANARY_BIN Warning: Task "karma:unit" failed. Use --force to continue.
Aborted due to warnings

Solution:
https://github.com/karma-runner/karma/blob/master/docs/config/03-browsers.md
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome

I can set the CHROME_CANARY_BIN after I install chrome canary version, but I can also go to the karma configuration file and change the browser to my chrome version.
> vi karma.conf.js

Download and install Chrome Canary
https://www.google.com/intl/en/chrome/browser/canary.html

That is great, I will begin to create my own angular example project.

3. My Own Example of Angular
…soon...

4. Start from AngularJS tutorial angular-phonecat.git
>git clone https://github.com/angular/angular-phonecat.git

>cd angular-phonecat
>node —version
>npm install

>./scripts/web-server.js
Then visit the URL http://localhost:8000/app/index.html

Bootstrapping
ng-app directive, this is the root element of our application. This gives application developers the freedom to tell angular if the entire html page or only a portion of it should be treated as the Angular application.

Import the CSS and JS lib, {{ ‘yet’ + ‘!’ }}, {{}} means an expression.

Once an application is bootstrapped, it will then wait for incoming browser events (such as mouse click, key press or incoming HTTP response) that might change the model. Once such an event occurs, Angular detects if it caused any model changes and reflect them in the view by updating all of the affected bindings.

Static Template
The full diff from step0 to step1 is here.
https://github.com/angular/angular-phonecat/compare/step-0...step-1

body{
     padding-top: 20px;
}

Just use static HTML as our angular template.

Angular Templates
http://code.angularjs.org/1.2.8/docs/api

View is a projection of the model through the HTML template.

View and Template
<li ng-repeat=“phone in phones”>
…snip…
</li>

We add ng-controller to attach the PhoneListCtrl controller to the DOM(Document Object Model).

The curly braces around phone.name denote bindings.

Model and Controller
We have a AngularJS module named phonecatApp, we declare a controller named PhoneListCtrl in phonecatApp module.

The controller plays a crucial role. Write tests for controllers.

Tests
All the tests are written by Jasmine, and they are running with karma.
Running the tests with this command.
>./scripts/test.sh
INFO [karma]: Karma v0.10.9 server started at http://localhost:9876/INFO [launcher]: Starting browser Chrome INFO [Chrome 32.0.1700 (Mac OS X 10.9.1)]: Connected on socket UH8OjsQWYgEhjRfBZx0_
Chrome 32.0.1700 (Mac OS X 10.9.1): Executed 1 of 1 SUCCESS (0.319 secs / 0.03 secs)


References:
Angular Document
http://dongderu.net/post/2012-10-19-angularjs-introduction
http://angularjs.org/
http://zouyesheng.com/angular.html
http://blog.brunoscopelliti.com/deal-with-users-authentication-in-an-angularjs-web-app

Angular Seed
https://github.com/angular/angular-seed
https://github.com/tnajdek/angular-requirejs-seed
https://github.com/maxdow/angularjs-requirejs-seed

Angular Testing
http://entwicklertagebuch.com/blog/2013/01/angularjs-app-mit-requirejs-und-testacular-testen/
https://github.com/jhiemer/angularjs-requirejs-testacular

Angular Startup
https://github.com/angular/angular.js
http://docs.angularjs.org/misc/contribute
http://docs.angularjs.org/misc/started

bower
http://blog.fens.me/nodejs-bower-intro/

Sample
https://github.com/daliworks/angular-require-bootstrap-seed

Angular Tutorial
http://code.angularjs.org/1.2.8/docs/tutorial/step_01

Angular API document
http://code.angularjs.org/1.2.8/docs/api


分享到:
评论

相关推荐

    (源码)基于QT框架的云存储系统.zip

    # 基于QT框架的云存储系统 ## 项目简介 本项目是一个基于QT框架开发的云存储系统,旨在为用户提供一个安全、高效的文件存储和分享平台。系统采用CS架构,客户端通过QT框架搭建,服务端运行在Centos 7环境下。用户可以通过系统进行文件的上传、下载、分享,以及与好友的私聊和文件分享。 ## 项目的主要特性和功能 好友管理支持添加、删除好友,私聊好友,以及分享文件给好友。 文件管理提供文件夹的创建、删除、移动、重命名操作,支持文件的上传、下载、移动和分享。 用户界面使用QT框架搭建用户界面,提供友好的交互体验。 网络通信通过自定义的交互协议实现客户端与服务器的高效数据交互。 并发处理服务器端采用多路复用、内存池、线程池等技术,确保在并发环境下的稳定运行。 ## 安装使用步骤 1. 下载源码从项目仓库下载源码文件。 2. 配置开发环境 服务端安装Centos 7,并配置vim、G++、gdb等开发工具。

    2010-2023国自科立项名单管理学部.xlsx

    1、资源内容地址:https://blog.csdn.net/2301_79696294/article/details/143636809 2、数据特点:今年全新,手工精心整理,放心引用,数据来自权威,且标注《数据来源》,相对于其他人的控制变量数据准确很多,适合写论文做实证用 ,不会出现数据造假问题 3、适用对象:大学生,本科生,研究生小白可用,容易上手!!! 3、课程引用: 经济学,地理学,城市规划与城市研究,公共政策与管理,社会学,商业与管理

    二、现有一份上市企业年度财务报告文本中管理层讨论与分析文本大数据,请测度以下相关的数据(60分)

    二、现有一份上市企业年度财务报告文本中管理层讨论与分析文本大数据,请测度以下相关的数据(60分)

    多个SVCTTS的C推理库.zip

    c语言

    1991-2022年国家社科基金项目数据公布.xlsx

    1、资源内容地址:https://blog.csdn.net/2301_79696294/article/details/143636809 2、数据特点:今年全新,手工精心整理,放心引用,数据来自权威,且标注《数据来源》,相对于其他人的控制变量数据准确很多,适合写论文做实证用 ,不会出现数据造假问题 3、适用对象:大学生,本科生,研究生小白可用,容易上手!!! 3、课程引用: 经济学,地理学,城市规划与城市研究,公共政策与管理,社会学,商业与管理

    B.5-本科毕业生就业满意度分析.pdf

    B.5-本科毕业生就业满意度分析.pdf

    (源码)基于Spring Boot和JWT的饮品管理系统.zip

    # 基于Spring Boot和JWT的饮品管理系统 ## 项目简介 本项目是一个基于Spring Boot框架的饮品管理系统,主要用于管理饮品分类、商品信息、员工登录及权限管理等功能。系统通过JWT(JSON Web Token)实现用户身份验证和授权,确保系统的安全性和可靠性。 ## 项目的主要特性和功能 1. 商品管理包括商品的添加、编辑、删除和查询功能,支持分页查询和按分类查询。 2. 分类管理支持饮品分类的添加和查询,方便用户按类别浏览商品。 3. 员工登录与权限管理实现员工登录功能,并根据员工角色分配不同的菜单权限。 4. 图片上传与管理支持商品图片的上传和更新,确保商品信息的完整性。 5. 验证码生成与验证提供图形验证码的生成和验证功能,增强系统的安全性。 6. JWT身份验证使用JWT实现用户身份验证和授权,确保系统的安全性和可靠性。 ## 安装使用步骤 1. 复制项目 bash 2. 配置数据库

    基于PythonSnort入侵检测IDS系统 框架 html + css + jquery + echart + python

    基于PythonSnort入侵检测IDS系统 框架 html + css + jquery + echart + python + flask + snort + snortrules(支持webtop10,cve检测配置规则就行) + mysql 用户类型 管理员 admin 123456 模块介绍 登录注册 Snort系统首页 Snort入侵检测 (Snort辅助检测) Snort策略配置 Snort历史日志 Snort密码重置 退出登录 数据库设计SnortInfo Admins Idsni pip install -i https://mirrors.aliyun.com/pypi/simple Pillow

    yolov8 瑞芯微 rknn 板端 C部署.zip

    c语言

    一个用于解析世界各地街道地址的C库,由统计NLP和开放地理数据提供支持.zip

    c语言

    佳能打印机清零软件和教程

    佳能打印机清零软件和教程

    (源码)基于Python的船舶轨迹与波浪模式分析系统.zip

    # 基于Python的船舶轨迹与波浪模式分析系统 ## 项目简介 本项目是一个基于Python的船舶轨迹与波浪模式分析系统,旨在通过雷达图像数据(DAS数据)分析船舶的航行轨迹,并模拟和可视化船舶产生的尾波如何被DAS系统感知。项目包含了数据读取、滤波处理、轨迹绘制、模拟数据生成与可视化等多个功能,并使用了TDMS文件格式的读取和处理,以及Radon变换等数据处理技术。 ## 主要特性和功能 1. 数据读取与预处理项目提供了读取TDMS文件格式的雷达图像数据,并进行了滤波处理和下采样,以便于后续的数据分析和可视化。 2. 雷达图像分析通过Radon变换将二维雷达图像数据转换为一维正弦图,便于分析船舶的航行轨迹和速度。 3. 模拟数据生成项目模拟了船舶在海上行驶时产生的尾波,并模拟了这些尾波如何被DAS系统感知。 4. 可视化展示通过matplotlib库将处理后的数据和模拟数据可视化,方便用户直观地了解船舶的航行轨迹和波浪模式。

    【9464】基于Springboot+vue的大学生计算机基础网络教学系统.zip

    技术选型 【后端】:Java 【框架】:springboot 【前端】:vue 【JDK版本】:JDK1.8 【服务器】:tomcat7+ 【数据库】:mysql 5.7+ 项目包含前后台完整源码。 项目都经过严格调试,确保可以运行! 具体项目介绍可查看博主文章或私聊获取 助力学习实践,提升编程技能,快来获取这份宝贵的资源吧! 在当今快速发展的信息技术领域,技术选型是决定一个项目成功与否的重要因素之一。基于以下的技术栈,我们为您带来了一份完善且经过实践验证的项目资源,让您在学习和提升编程技能的道路上事半功倍。以下是该项目的技术选型和其组件的详细介绍。 在后端技术方面,我们选择了Java作为编程语言。Java以其稳健性、跨平台性和丰富的库支持,在企业级应用中处于领导地位。项目采用了流行的Spring Boot框架,这个框架以简化Java企业级开发而闻名。Spring Boot提供了简洁的配置方式、内置的嵌入式服务器支持以及强大的生态系统,使开发者能够更高效地构建和部署应用。 前端技术方面,我们使用了Vue.js,这是一个用于构建用户界面的渐进式JavaScript框架。Vue以其易上手、灵活和性能出色而受到开发者的青睐,它的组件化开发思想也有助于提高代码的复用性和可维护性。 项目的编译和运行环境选择了JDK 1.8。尽管Java已经推出了更新的版本,但JDK 1.8依旧是一种成熟且稳定的选择,广泛应用于各类项目中,确保了兼容性和稳定性。 在服务器方面,本项目部署在Tomcat 7+之上。Tomcat是Apache软件基金会下的一个开源Servlet容器,也是应用最为广泛的Java Web服务器之一。其稳定性和可靠的性能表现为Java Web应用提供了坚实的支持。 数据库方面,我们采用了MySQL 5.7+。MySQL是一种高效、可靠且使用广泛的关系型数据库管理系统,5.7版本在性能和功能上都有显著的提升。 值得一提的是,该项目包含了前后台的完整源码,并经过严格调试,确保可以顺利运行。通过项目的学习和实践,您将能更好地掌握从后端到前端的完整开发流程,提升自己的编程技能。欢迎参考博主的详细文章或私信获取更多信息,利用这一宝贵资源来推进您的技术成长之路!

    (源码)基于嵌入式系统的Greenhouse环境监测系统.zip

    # 基于嵌入式系统的Greenhouse环境监测系统 ## 项目简介 本项目旨在通过嵌入式系统监测温室内的环境参数,包括空气温度、湿度、地面温度和湿度以及光线强度。通过连接多种传感器到Nucleo微控制器L432KC,收集数据并通过Sigfox模块进行网络传输,用户可以在网站上查看这些数据。此外,数据还会实时显示在OLED屏幕上,方便用户直接观察。系统通过光伏电池和电池供电,实现了自给自足的能源管理。 ## 项目的主要特性和功能 1. 传感器数据读取通过DHT传感器(温度和湿度)、DS18B20温度传感器、光传感器TSL2561等读取环境参数。 2. 数据处理和传输通过主程序(main.cpp)处理读取的数据,并通过Sigfox模块进行网络传输。 3. OLED屏幕显示实时显示环境参数数据,包括空气温度、湿度、光线强度等。 4. 开源和可扩展性项目基于开源平台开发,可方便地集成更多传感器和功能。 ## 安装使用步骤 1. 下载并解压项目源码文件。

    (源码)基于QT的景点管理系统.zip

    # 基于QT的景点管理系统 ## 项目简介 本项目是一个基于QT框架开发的景点管理系统,旨在帮助用户管理和查询旅游景点的信息。系统通过图形界面展示景点之间的连接关系,并提供景点推荐路径、最短路径查询、深度优先搜索遍历等功能。 ## 项目的主要特性和功能 1. 景点管理 插入新的景点和边,构建景点图。 获取景点信息,查找与指定景点相邻的边。 2. 路径计算 计算并显示景点之间的推荐游览路径,基于最小生成树算法。 计算并显示两点之间的最短路径。 3. 景点遍历 提供深度优先搜索(DFS)功能,从指定景点开始遍历所有相关景点。 4. 信息展示 显示所有景点之间的连接路径。 显示指定景点的详细信息。 ## 安装使用步骤 1. 环境准备 确保已安装QT开发环境(建议使用QT 5.12.10及以上版本)。 确保已安装MinGW 32位编译器。

    简单的系统智能黑白棋小游戏

    简单的系统智能黑白棋小游戏

    pythonx项目5.爬取5K分辨率超清唯美壁纸.zip

    pythonx项目5.爬取5K分辨率超清唯美壁纸.zip

    M5Stack Arduino库.zip

    c语言

    emc学习资料有讲解ppt和案例,自用

    emc学习资料有讲解ppt和案例,自用

    2021商业银行经营分析明细一级资本充足率不良贷款比例非利息收入占比净利差净利润等

    2021商业银行经营分析明细 一级资本充足率不良贷款比例非利息收入占比净利差净利润等 1、数据说明 整理了各商业银行年报年报数据,包括各大行、股份制银行、城商行、农商行,26个指标的统计。城商行、农商行年报披露的数据维度相对较少。集合多指标。 2、主要指标 发行人代码 发行人代码 发行人全称 存贷款比例(%) 短期资产流动性比例(%) 单一最大客户贷款比例(%) 最大十家客户贷款比例(%) 核心一级资本充足率(%) 一级资本充足率 不良贷款比例(%) 拨备覆盖率 贷款拨备率 流动性覆盖率 风险加权资产合计(万元) 信用风险加权资产(万元) 市场风险加权资产(万元) 操作风险加权资产(万元) 正常类贷款迁徙率 关注类贷款迁徙率 次级类贷款迁徙率 可疑类贷款迁徙率成本收入比(%) 非利息收入占比(%) 净利差(%) 手续费及佣金净收入(万元) 净利润(万元) 营业收入(万元) 2021银行经营分析明细.xls (237 KB)

Global site tag (gtag.js) - Google Analytics