Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
AngularJS:入門篇 
開發技巧實戰系列(1/6) - Web 前端技術 
講師: 郭二文
Document, Source code & Training 
Video 
• https://github.com/erhwenkuo/PracticalCoding
References 
• The training material of this session are base on 
Dan Wahlin’s terrific “AngularJS Fundamentals 
in 60-ish ...
Agenda 
• AngularJS Introduction 
• Getting Started & Features 
• Directives, Filters and Data Binding 
• Views, Controlle...
AngularJS Introduction
AngularJS Website 
Http://angularjs.org
Feeling About AngularJS Over Time 
1. Neat 
 What? This is so lame! 
2. Ok, that’s pretty sweet! 
 I can’t believe how d...
Feeling About AngularJS Over Time
Feeling About AngularJS Over Time
Getting Started & 
Features
Single Page Application (SPA)
The Challenge with SPAs 
DOM Manipulation 
Routing 
Caching 
Data Binding 
History Module Loading 
Object Modeling 
Ajax/P...
AngularJS is a full-featured SPA 
framework 
Data Binding MVC Routing Testing 
jqLite Templates History Factories 
ViewMod...
Developing Environment & Source Tree 
Configure the Machine 
• .NET Framework 4.51 
• Visual Studio 2013 (Update 4) 
Sourc...
Developing Environment & Source Tree 
Creating The Solution Folder Structure 
• Create a “Blank Solution” named “Practical...
Developing Environment & Source Tree 
• Use File explorer to open 
“PracticalCoding.sln” file 
• Add new “ASP.NET Web 
App...
Developing Environment & Source Tree 
• Choose “Web API” template 
• Click “Change Authentication” to 
“No Authentication”...
Developing Environment & Source Tree 
Setup AngularJS 
1. Download most update AngularJS 
from https://angularjs.org 
2. U...
Directives, Filters and 
Data Binding
What are Directives? 
They teach HTML new tricks!
Using Directives and Data Binding 
Syntax
Using Directives and Data Binding 
Syntax (step_01_blankpage.html) 
Demo Page 
1. Create “MyApp” folder 
2. Create 
“01_Di...
Using Directives and Data Binding 
Syntax (step_02_normalpage.html) 
Demo Page 
1. Copy “step_01_blankpage.html” as “step_...
Using Directives and Data Binding Syntax 
(step_03_adddirectivedatabind.html) 
Demo Page 
1. Copy 
“step_02_normalpage.htm...
Iterating with the ng-repeat 
Directive 
1. “ng-init” is the angular directive to initialize some data 
2. “ng-init” is th...
Iterating with the ng-repeat 
Directive(step_04_iteratewithngrepeat) 
Demo Page 
1. Copy 
“step_03_adddirectivedatabind.ht...
AngularJS Directives Document
Using Filters 
Filter in AngularJS is not only used to filter data, but also it can be used to format 
data for display as...
Iterating with the ng-repeat 
Directive(step_05_nginitcustomers) 
Demo Page 
1. Copy 
“step_04_iteratewithngrepeat.html 
”...
Iterating with the ng-repeat 
Directive(step_06_filterbyinputandformat) 
Demo Page 
1. Copy “step_05_nginitcustomers.html”...
AngularJS Filter Component List
Views, Controllers and 
Scope
AngularJS View, Controllers & Scope 
1. $scope is the “glue” (ViewModel) between a controller and a view 
2. The view don’...
AngularJS View, Controllers & 
$scope(step_07_simplecontroller) 
Demo Page 
Copy “step_06_filterbyinputandformat.html” as ...
AngularJS View, Controllers & $scope
Modules, Routes and 
Factories
AngularJS Architecture (Simplified) 
Module 
Config 
Routes 
View $scope Controller 
Directives Factory
Modules are Containers 
Controller 
Config 
Routes 
Module 
Filter Directives Factory 
Service 
Provider 
Value
Creating AngularJS Module & 
Controller
AngularJS Module and Controllers 
(step_07_simplecontroller) 
Demo Page 
step_07_simplecontroller.html 
Assign view to spe...
The Role of Routes
Defining Routes
AngularJS Define Routes Demo 
(step_08_defineroutes) 
Demo Page 
Copy “step_07_simplecontroller.html” as “step_08_definero...
AngularJS Define Routes Demo 
(step_08_defineroutes) 
Demo Page 
Create “View1.html” under folder “Partials_step_08”
AngularJS Define Routes Demo 
(step_08_defineroutes) 
Demo Page 
Create “View2.html” under folder “Partials_step_08”
AngularJS Define Routes Demo 
(step_08_defineroutes) 
Demo Page 
Select “step_08_defineroutes.html” and Hit “F5” to run
AngularJS Define Routes Demo 
(step_09_addcustomer) 
Demo Page 
Copy “step_08_defineroutes.html” as “step_09_addcustomer.h...
AngularJS Define Routes Demo 
(step_09_addcustomer) 
Demo Page 
Copy“Partials_step_08” to “Partials_step_09” & Modify “Vie...
AngularJS Define Routes Demo 
(step_09_addcustomer) 
Demo Page 
Select “step_09_addcustomer.html” and Hit “F5” to run
Using Factories and Services 
Controller 
Config 
Routes 
Module 
Filter Directives Factory 
Service 
Provider 
Value
The Role of Factories
AngularJS Factory Demo 
(step_10_factorytogetcustomer) 
Demo Page 
1. Copy “step_09_addcustomer.html” as “step_10_factoryt...
AngularJS Factory Demo 
(step_10_factorytogetcustomer) 
Demo Page 
Return javascript 
object instance 
Create a new 
varia...
AngularJS Factory Demo 
(step_10_factorytogetcustomer) 
Use “SimpleFactory” 
to access shared 
methods or 
attributes
AngularJS Factory Demo 
(step_10_factorytogetcustomer) 
Config Routings for 
Create, Update & 
Delete views
AngularJS Factory Demo 
(step_10_factorytogetcustomer) 
Define 
Create/Update/Delete 
View Tempaltes
AngularJS Factory Demo 
(step_10_factorytogetcustomer) 
Demo Page 
Select “step_10_factorytogetcustomer.html” and Hit “F5”...
Next Session: 
AngularJS with Highchart
Nächste SlideShare
Wird geladen in …5
×

01 startoff angularjs

More and more web application is adopting "Single Page Application (SPA)" style to improve user experience (UX). There are many different SPA framework out there, however AngularJS leading by Google really stand out, not only because it can dramatically reduce the developing effort, but also it can improve the maintainability, testability and efficiency. In this tutorial, it will demonstrates the fundamentals features of AngularJS with easy to follow sample pages. All the source code could be found on GitHub: https://github.com/erhwenkuo/PracticalCoding

  • Loggen Sie sich ein, um Kommentare anzuzeigen.

01 startoff angularjs

  1. 1. AngularJS:入門篇 開發技巧實戰系列(1/6) - Web 前端技術 講師: 郭二文
  2. 2. Document, Source code & Training Video • https://github.com/erhwenkuo/PracticalCoding
  3. 3. References • The training material of this session are base on Dan Wahlin’s terrific “AngularJS Fundamentals in 60-ish Minutes” • https://www.youtube.com/watch?v=i9MHigUZ KEM
  4. 4. Agenda • AngularJS Introduction • Getting Started & Features • Directives, Filters and Data Binding • Views, Controllers and Scope • Modules, Routes and Factories
  5. 5. AngularJS Introduction
  6. 6. AngularJS Website Http://angularjs.org
  7. 7. Feeling About AngularJS Over Time 1. Neat  What? This is so lame! 2. Ok, that’s pretty sweet!  I can’t believe how difficult they make some of this stuff! Are you kidding me?! 3. Very Cool!  We’ve made a horrible choice! We should went with Backbone. 4. OMG, that’s awesome!  Better freshen up the old resume. 5. Most awesome framework ever!
  8. 8. Feeling About AngularJS Over Time
  9. 9. Feeling About AngularJS Over Time
  10. 10. Getting Started & Features
  11. 11. Single Page Application (SPA)
  12. 12. The Challenge with SPAs DOM Manipulation Routing Caching Data Binding History Module Loading Object Modeling Ajax/Promises View Loading
  13. 13. AngularJS is a full-featured SPA framework Data Binding MVC Routing Testing jqLite Templates History Factories ViewModel Controllers Views Directives Services Dependency Injection Validation
  14. 14. Developing Environment & Source Tree Configure the Machine • .NET Framework 4.51 • Visual Studio 2013 (Update 4) Source Tree Folder Structure • doc : Contains documents related to the code base • lib : Contains all third-party and packages used by the application, including NuGet downloaded packages • src : Contains all the source code, including Visual Studio file(s) and all project folders PracticalCoding doc lib src
  15. 15. Developing Environment & Source Tree Creating The Solution Folder Structure • Create a “Blank Solution” named “PracticalCoding” in Visual Studio • Close Visual Studio and copy “PracticalCoding.sln” to “src” folder • Delete the empty folder • Use text editor to create “nugget.config” file with below content under “src” folder PracticalCoding doc lib src PracticalCoding.sln Nugget.config
  16. 16. Developing Environment & Source Tree • Use File explorer to open “PracticalCoding.sln” file • Add new “ASP.NET Web Application” project under “PracticalCoding” solution in Visual Studio • Name this web project to “PracticalCoding.Web” • Click “OK”
  17. 17. Developing Environment & Source Tree • Choose “Web API” template • Click “Change Authentication” to “No Authentication” • Click “OK”
  18. 18. Developing Environment & Source Tree Setup AngularJS 1. Download most update AngularJS from https://angularjs.org 2. Unzip and rename to “angular” 3. Copy and paste to C# project under “/Scripts” folder 4. Include the whole “/Scripts/angular” folder into C# project
  19. 19. Directives, Filters and Data Binding
  20. 20. What are Directives? They teach HTML new tricks!
  21. 21. Using Directives and Data Binding Syntax
  22. 22. Using Directives and Data Binding Syntax (step_01_blankpage.html) Demo Page 1. Create “MyApp” folder 2. Create “01_DirectivesAndDataBinding” folder under “MyApp” 3. Add new html file named “step_01_blankpage.html” 4. Drag “angular.js” from “Scripts” folder inside”<body></body>”
  23. 23. Using Directives and Data Binding Syntax (step_02_normalpage.html) Demo Page 1. Copy “step_01_blankpage.html” as “step_02_normalpage.html 2. Add a simple html “input” tag 3. Hit “F5” and see the result
  24. 24. Using Directives and Data Binding Syntax (step_03_adddirectivedatabind.html) Demo Page 1. Copy “step_02_normalpage.html” as “step_03_adddirectivedatabi nd.html ” 2. Add “ng-app” as attribute within “<html>” tag 3. Add “ng-model=‘vm.name’” within “<input>” tag 4. Add “{{vm.name}}” after “<input>” tage 5. Hit “F5” and see the result
  25. 25. Iterating with the ng-repeat Directive 1. “ng-init” is the angular directive to initialize some data 2. “ng-init” is the angular directive to iterate collection of data
  26. 26. Iterating with the ng-repeat Directive(step_04_iteratewithngrepeat) Demo Page 1. Copy “step_03_adddirectivedatabind.html” as “step_04_iteratewithngrepeat.html ” 2. Add “ng-init=….” as attribute in <body> tag and add “ng-repeat” as attribute in <li> tag. 3. Add angular expression “{{personName}} ” to show binding value 4. Hit “F5” and see the result
  27. 27. AngularJS Directives Document
  28. 28. Using Filters Filter in AngularJS is not only used to filter data, but also it can be used to format data for display as well
  29. 29. Iterating with the ng-repeat Directive(step_05_nginitcustomers) Demo Page 1. Copy “step_04_iteratewithngrepeat.html ” as “step_05_nginitcustomers.html” 2. Change “ng-init=…. “ to initialize a array of Customer objects 3. Change “ng-repeat” to iterate this new customers collection. And Change angular expression “{{customer.name}} - “{{customer.city}} ” to show binding value 4. Hit “F5” and see the result
  30. 30. Iterating with the ng-repeat Directive(step_06_filterbyinputandformat) Demo Page 1. Copy “step_05_nginitcustomers.html” as “step_06_filterbyinputandformat.html”
  31. 31. AngularJS Filter Component List
  32. 32. Views, Controllers and Scope
  33. 33. AngularJS View, Controllers & Scope 1. $scope is the “glue” (ViewModel) between a controller and a view 2. The view don’t have to know about the controller 3. The controller definitely doesn’t want to know about the view View $scope Controller
  34. 34. AngularJS View, Controllers & $scope(step_07_simplecontroller) Demo Page Copy “step_06_filterbyinputandformat.html” as “step_07_simplecontroller.html” Assign view to specific controller $scope is injected ng-repeat access the vm.customers via $scope
  35. 35. AngularJS View, Controllers & $scope
  36. 36. Modules, Routes and Factories
  37. 37. AngularJS Architecture (Simplified) Module Config Routes View $scope Controller Directives Factory
  38. 38. Modules are Containers Controller Config Routes Module Filter Directives Factory Service Provider Value
  39. 39. Creating AngularJS Module & Controller
  40. 40. AngularJS Module and Controllers (step_07_simplecontroller) Demo Page step_07_simplecontroller.html Assign view to specific controller $scope is injected
  41. 41. The Role of Routes
  42. 42. Defining Routes
  43. 43. AngularJS Define Routes Demo (step_08_defineroutes) Demo Page Copy “step_07_simplecontroller.html” as “step_08_defineroutes.html” Include “angular-route. js” Using “$routeProvider” to define routes Add one <div> with “ng-view” inside
  44. 44. AngularJS Define Routes Demo (step_08_defineroutes) Demo Page Create “View1.html” under folder “Partials_step_08”
  45. 45. AngularJS Define Routes Demo (step_08_defineroutes) Demo Page Create “View2.html” under folder “Partials_step_08”
  46. 46. AngularJS Define Routes Demo (step_08_defineroutes) Demo Page Select “step_08_defineroutes.html” and Hit “F5” to run
  47. 47. AngularJS Define Routes Demo (step_09_addcustomer) Demo Page Copy “step_08_defineroutes.html” as “step_09_addcustomer.html” Create a new variable for newCustomer Add a new method “addCustomer()” under “SimpleController” Create a new variable for newCustomer Define routings
  48. 48. AngularJS Define Routes Demo (step_09_addcustomer) Demo Page Copy“Partials_step_08” to “Partials_step_09” & Modify “View1.html” Binding input to newCustomer Use “ng-click” to call “addCustomer()” method
  49. 49. AngularJS Define Routes Demo (step_09_addcustomer) Demo Page Select “step_09_addcustomer.html” and Hit “F5” to run
  50. 50. Using Factories and Services Controller Config Routes Module Filter Directives Factory Service Provider Value
  51. 51. The Role of Factories
  52. 52. AngularJS Factory Demo (step_10_factorytogetcustomer) Demo Page 1. Copy “step_09_addcustomer.html” as “step_10_factorytogetcustomer.html” 2. Add AngularJS factory “SimpleFactory” Create a new factory “SimpleFactory“ Define a javascript object instance for return Create a new variable for newCustomer Define factory own variables and methods for external access
  53. 53. AngularJS Factory Demo (step_10_factorytogetcustomer) Demo Page Return javascript object instance Create a new variable for newCustomer Define factory own variables and methods for external access
  54. 54. AngularJS Factory Demo (step_10_factorytogetcustomer) Use “SimpleFactory” to access shared methods or attributes
  55. 55. AngularJS Factory Demo (step_10_factorytogetcustomer) Config Routings for Create, Update & Delete views
  56. 56. AngularJS Factory Demo (step_10_factorytogetcustomer) Define Create/Update/Delete View Tempaltes
  57. 57. AngularJS Factory Demo (step_10_factorytogetcustomer) Demo Page Select “step_10_factorytogetcustomer.html” and Hit “F5” to run
  58. 58. Next Session: AngularJS with Highchart

×