SlideShare a Scribd company logo
1 of 42
Download to read offline
🌎
Google AngularJS Style Guide
https://google-styleguide.googlecode.com/svn/trunk/angularjs-google-style.html
‘use strict’
angular.controller(‘myController’, [‘$scope’, ’$location’, ’fooService’, ’barService’,
function($scope, $location, fooService, barService){
…
}]);
Typical Module Definition
(function(){
‘use strict’
var ctrlName = “myController”;
angular.controller(ctrlName, [‘$scope’, ‘$location’, ‘fooService’, ‘barService’, myController]);
function myController($scope, $location, fooService, barService){
…
}
}());
AngularJS 2.0 Router Design Document
https://docs.google.com/document/d/1I3UC0RrgCh9CKrLxeE4sxwmNSBl3oSXQGt9g3KZnTJI/edit
Route Management
app.js
app.js
routes.js
/**
* Custom checkbox style for app
*
* Usage:
* <custom-checkbox
* checked=“checkedVal” // boolean
* predicate=“predicateVal”> // string
* </custom-checkbox>
*
*/
app.directive(‘customCheckbox’, function(){
return {
scope: {
‘checked’:’=‘,
‘predicate’:’=‘
}
…
}
});
app.directive(‘customCheckbox’,
function(){
return {
scope: {
‘checked’:’=‘,
‘predicate’:’=‘
}
…
}
});
Ctrl + Alt + I
Cmd + Alt + I
JSBin Repo
https://github.com/jsbin/jsbin/
How do I “think in AngularJS” if I have a jQuery background?
http://stackoverflow.com/questions/14994391/how-do-i-think-in-angularjs-if-i-have-a-jquery-
background
Service vs Provider vs Factory
http://stackoverflow.com/questions/15666048/angular-js-service-vs-provider-vs-factory
Difference Between ‘Link’, ‘Controller’ and ‘Compile’ for Directives
http://stackoverflow.com/questions/12546945/difference-between-the-controller-link-and-
compile-functions-when-definin
Understanding Scopes
https://github.com/angular/angular.js/wiki/Understanding-Scopes
Angular in the Enterprise
Angular in the Enterprise
Angular in the Enterprise

More Related Content

What's hot

Comment pages 002
Comment pages 002Comment pages 002
Comment pages 002RiNi Ft
 
hachioji.pm #40 : asynchronous in JS
hachioji.pm #40 : asynchronous in JShachioji.pm #40 : asynchronous in JS
hachioji.pm #40 : asynchronous in JSKotaro Kawashima
 
Building a dashboard using AngularJS
Building a dashboard using AngularJSBuilding a dashboard using AngularJS
Building a dashboard using AngularJSRajthilakMCA
 
Dundee University HackU 2013 - Mojito
Dundee University HackU 2013 - MojitoDundee University HackU 2013 - Mojito
Dundee University HackU 2013 - Mojitosmartads
 
MEAN - Notes from the field (Full-Stack Development with Javascript)
MEAN - Notes from the field (Full-Stack Development with Javascript)MEAN - Notes from the field (Full-Stack Development with Javascript)
MEAN - Notes from the field (Full-Stack Development with Javascript)Chris Clarke
 
Web+GISという視点から見たGISの方向性
Web+GISという視点から見たGISの方向性Web+GISという視点から見たGISの方向性
Web+GISという視点から見たGISの方向性Hidenori Fujimura
 

What's hot (13)

Expressを使ってみた
Expressを使ってみたExpressを使ってみた
Expressを使ってみた
 
Comment pages 002
Comment pages 002Comment pages 002
Comment pages 002
 
Hands on AngularJS
Hands on AngularJSHands on AngularJS
Hands on AngularJS
 
hachioji.pm #40 : asynchronous in JS
hachioji.pm #40 : asynchronous in JShachioji.pm #40 : asynchronous in JS
hachioji.pm #40 : asynchronous in JS
 
Building a dashboard using AngularJS
Building a dashboard using AngularJSBuilding a dashboard using AngularJS
Building a dashboard using AngularJS
 
Sails.js - Overview
Sails.js - OverviewSails.js - Overview
Sails.js - Overview
 
Swf2 ui
Swf2 uiSwf2 ui
Swf2 ui
 
Dundee University HackU 2013 - Mojito
Dundee University HackU 2013 - MojitoDundee University HackU 2013 - Mojito
Dundee University HackU 2013 - Mojito
 
Ahmad faizun
Ahmad faizunAhmad faizun
Ahmad faizun
 
CakePHP in iPhone App
CakePHP in iPhone AppCakePHP in iPhone App
CakePHP in iPhone App
 
Fun with Maps and PHP
Fun with Maps and PHPFun with Maps and PHP
Fun with Maps and PHP
 
MEAN - Notes from the field (Full-Stack Development with Javascript)
MEAN - Notes from the field (Full-Stack Development with Javascript)MEAN - Notes from the field (Full-Stack Development with Javascript)
MEAN - Notes from the field (Full-Stack Development with Javascript)
 
Web+GISという視点から見たGISの方向性
Web+GISという視点から見たGISの方向性Web+GISという視点から見たGISの方向性
Web+GISという視点から見たGISの方向性
 

Similar to Angular in the Enterprise

Building an End-to-End AngularJS Application
Building an End-to-End AngularJS ApplicationBuilding an End-to-End AngularJS Application
Building an End-to-End AngularJS ApplicationDan Wahlin
 
Architecture, Auth, and Routing with uiRouter
Architecture, Auth, and Routing with uiRouterArchitecture, Auth, and Routing with uiRouter
Architecture, Auth, and Routing with uiRouterChristopher Caplinger
 
Modules and injector
Modules and injectorModules and injector
Modules and injectorEyal Vardi
 
Angular js routing options
Angular js routing optionsAngular js routing options
Angular js routing optionsNir Kaufman
 
AngularJs Superheroic JavaScript MVW Framework Services by Miracle Studios
AngularJs Superheroic JavaScript MVW Framework Services by Miracle StudiosAngularJs Superheroic JavaScript MVW Framework Services by Miracle Studios
AngularJs Superheroic JavaScript MVW Framework Services by Miracle StudiosLearnimtactics
 
Angular js vs. Facebook react
Angular js vs. Facebook reactAngular js vs. Facebook react
Angular js vs. Facebook reactKeyup
 
Opinionated AngularJS
Opinionated AngularJSOpinionated AngularJS
Opinionated AngularJSprabhutech
 
Understanding angular js $rootscope and $scope
Understanding angular js $rootscope and $scopeUnderstanding angular js $rootscope and $scope
Understanding angular js $rootscope and $scopeBrajesh Yadav
 
CFUGbe talk about Angular JS
CFUGbe talk about Angular JSCFUGbe talk about Angular JS
CFUGbe talk about Angular JSAlwyn Wymeersch
 
AngularJS Routing
AngularJS RoutingAngularJS Routing
AngularJS RoutingEyal Vardi
 
Sharing Data between controllers in different ways.
Sharing Data between controllers in different ways.Sharing Data between controllers in different ways.
Sharing Data between controllers in different ways.Amar Shukla
 
Different way to share data between controllers in angular js
Different way to share data between controllers in angular jsDifferent way to share data between controllers in angular js
Different way to share data between controllers in angular jscodeandyou forums
 
ui-router and $state
ui-router and $stateui-router and $state
ui-router and $stategarbles
 
Angular the Good Parts
Angular the Good PartsAngular the Good Parts
Angular the Good PartsKrzysztof Kula
 
Good karma: UX Patterns and Unit Testing in Angular with Karma
Good karma: UX Patterns and Unit Testing in Angular with KarmaGood karma: UX Patterns and Unit Testing in Angular with Karma
Good karma: UX Patterns and Unit Testing in Angular with KarmaExoLeaders.com
 
Introduction to AngularJS (@oakjug June 2013)
Introduction to AngularJS (@oakjug June 2013)Introduction to AngularJS (@oakjug June 2013)
Introduction to AngularJS (@oakjug June 2013)Chris Richardson
 
A Story about AngularJS modularization development
A Story about AngularJS modularization developmentA Story about AngularJS modularization development
A Story about AngularJS modularization developmentJohannes Weber
 
Introduction to AngularJS For WordPress Developers
Introduction to AngularJS For WordPress DevelopersIntroduction to AngularJS For WordPress Developers
Introduction to AngularJS For WordPress DevelopersCaldera Labs
 

Similar to Angular in the Enterprise (20)

Building an End-to-End AngularJS Application
Building an End-to-End AngularJS ApplicationBuilding an End-to-End AngularJS Application
Building an End-to-End AngularJS Application
 
Architecture, Auth, and Routing with uiRouter
Architecture, Auth, and Routing with uiRouterArchitecture, Auth, and Routing with uiRouter
Architecture, Auth, and Routing with uiRouter
 
Modules and injector
Modules and injectorModules and injector
Modules and injector
 
Angular js routing options
Angular js routing optionsAngular js routing options
Angular js routing options
 
AngularJs Superheroic JavaScript MVW Framework Services by Miracle Studios
AngularJs Superheroic JavaScript MVW Framework Services by Miracle StudiosAngularJs Superheroic JavaScript MVW Framework Services by Miracle Studios
AngularJs Superheroic JavaScript MVW Framework Services by Miracle Studios
 
Angular js vs. Facebook react
Angular js vs. Facebook reactAngular js vs. Facebook react
Angular js vs. Facebook react
 
Opinionated AngularJS
Opinionated AngularJSOpinionated AngularJS
Opinionated AngularJS
 
Angular Workshop_Sarajevo2
Angular Workshop_Sarajevo2Angular Workshop_Sarajevo2
Angular Workshop_Sarajevo2
 
Understanding angular js $rootscope and $scope
Understanding angular js $rootscope and $scopeUnderstanding angular js $rootscope and $scope
Understanding angular js $rootscope and $scope
 
CFUGbe talk about Angular JS
CFUGbe talk about Angular JSCFUGbe talk about Angular JS
CFUGbe talk about Angular JS
 
AngularJS Routing
AngularJS RoutingAngularJS Routing
AngularJS Routing
 
Sharing Data between controllers in different ways.
Sharing Data between controllers in different ways.Sharing Data between controllers in different ways.
Sharing Data between controllers in different ways.
 
Different way to share data between controllers in angular js
Different way to share data between controllers in angular jsDifferent way to share data between controllers in angular js
Different way to share data between controllers in angular js
 
ui-router and $state
ui-router and $stateui-router and $state
ui-router and $state
 
Angular the Good Parts
Angular the Good PartsAngular the Good Parts
Angular the Good Parts
 
AngularJS
AngularJSAngularJS
AngularJS
 
Good karma: UX Patterns and Unit Testing in Angular with Karma
Good karma: UX Patterns and Unit Testing in Angular with KarmaGood karma: UX Patterns and Unit Testing in Angular with Karma
Good karma: UX Patterns and Unit Testing in Angular with Karma
 
Introduction to AngularJS (@oakjug June 2013)
Introduction to AngularJS (@oakjug June 2013)Introduction to AngularJS (@oakjug June 2013)
Introduction to AngularJS (@oakjug June 2013)
 
A Story about AngularJS modularization development
A Story about AngularJS modularization developmentA Story about AngularJS modularization development
A Story about AngularJS modularization development
 
Introduction to AngularJS For WordPress Developers
Introduction to AngularJS For WordPress DevelopersIntroduction to AngularJS For WordPress Developers
Introduction to AngularJS For WordPress Developers
 

Recently uploaded

Building a General PDE Solving Framework with Symbolic-Numeric Scientific Mac...
Building a General PDE Solving Framework with Symbolic-Numeric Scientific Mac...Building a General PDE Solving Framework with Symbolic-Numeric Scientific Mac...
Building a General PDE Solving Framework with Symbolic-Numeric Scientific Mac...stazi3110
 
Unveiling Design Patterns: A Visual Guide with UML Diagrams
Unveiling Design Patterns: A Visual Guide with UML DiagramsUnveiling Design Patterns: A Visual Guide with UML Diagrams
Unveiling Design Patterns: A Visual Guide with UML DiagramsAhmed Mohamed
 
Maximizing Efficiency and Profitability with OnePlan’s Professional Service A...
Maximizing Efficiency and Profitability with OnePlan’s Professional Service A...Maximizing Efficiency and Profitability with OnePlan’s Professional Service A...
Maximizing Efficiency and Profitability with OnePlan’s Professional Service A...OnePlan Solutions
 
英国UN学位证,北安普顿大学毕业证书1:1制作
英国UN学位证,北安普顿大学毕业证书1:1制作英国UN学位证,北安普顿大学毕业证书1:1制作
英国UN学位证,北安普顿大学毕业证书1:1制作qr0udbr0
 
Dealing with Cultural Dispersion — Stefano Lambiase — ICSE-SEIS 2024
Dealing with Cultural Dispersion — Stefano Lambiase — ICSE-SEIS 2024Dealing with Cultural Dispersion — Stefano Lambiase — ICSE-SEIS 2024
Dealing with Cultural Dispersion — Stefano Lambiase — ICSE-SEIS 2024StefanoLambiase
 
Building Real-Time Data Pipelines: Stream & Batch Processing workshop Slide
Building Real-Time Data Pipelines: Stream & Batch Processing workshop SlideBuilding Real-Time Data Pipelines: Stream & Batch Processing workshop Slide
Building Real-Time Data Pipelines: Stream & Batch Processing workshop SlideChristina Lin
 
What are the key points to focus on before starting to learn ETL Development....
What are the key points to focus on before starting to learn ETL Development....What are the key points to focus on before starting to learn ETL Development....
What are the key points to focus on before starting to learn ETL Development....kzayra69
 
Der Spagat zwischen BIAS und FAIRNESS (2024)
Der Spagat zwischen BIAS und FAIRNESS (2024)Der Spagat zwischen BIAS und FAIRNESS (2024)
Der Spagat zwischen BIAS und FAIRNESS (2024)OPEN KNOWLEDGE GmbH
 
MYjobs Presentation Django-based project
MYjobs Presentation Django-based projectMYjobs Presentation Django-based project
MYjobs Presentation Django-based projectAnoyGreter
 
Advancing Engineering with AI through the Next Generation of Strategic Projec...
Advancing Engineering with AI through the Next Generation of Strategic Projec...Advancing Engineering with AI through the Next Generation of Strategic Projec...
Advancing Engineering with AI through the Next Generation of Strategic Projec...OnePlan Solutions
 
Automate your Kamailio Test Calls - Kamailio World 2024
Automate your Kamailio Test Calls - Kamailio World 2024Automate your Kamailio Test Calls - Kamailio World 2024
Automate your Kamailio Test Calls - Kamailio World 2024Andreas Granig
 
Implementing Zero Trust strategy with Azure
Implementing Zero Trust strategy with AzureImplementing Zero Trust strategy with Azure
Implementing Zero Trust strategy with AzureDinusha Kumarasiri
 
(Genuine) Escort Service Lucknow | Starting ₹,5K To @25k with A/C 🧑🏽‍❤️‍🧑🏻 89...
(Genuine) Escort Service Lucknow | Starting ₹,5K To @25k with A/C 🧑🏽‍❤️‍🧑🏻 89...(Genuine) Escort Service Lucknow | Starting ₹,5K To @25k with A/C 🧑🏽‍❤️‍🧑🏻 89...
(Genuine) Escort Service Lucknow | Starting ₹,5K To @25k with A/C 🧑🏽‍❤️‍🧑🏻 89...gurkirankumar98700
 
Cloud Data Center Network Construction - IEEE
Cloud Data Center Network Construction - IEEECloud Data Center Network Construction - IEEE
Cloud Data Center Network Construction - IEEEVICTOR MAESTRE RAMIREZ
 
办理学位证(UQ文凭证书)昆士兰大学毕业证成绩单原版一模一样
办理学位证(UQ文凭证书)昆士兰大学毕业证成绩单原版一模一样办理学位证(UQ文凭证书)昆士兰大学毕业证成绩单原版一模一样
办理学位证(UQ文凭证书)昆士兰大学毕业证成绩单原版一模一样umasea
 
Intelligent Home Wi-Fi Solutions | ThinkPalm
Intelligent Home Wi-Fi Solutions | ThinkPalmIntelligent Home Wi-Fi Solutions | ThinkPalm
Intelligent Home Wi-Fi Solutions | ThinkPalmSujith Sukumaran
 
EY_Graph Database Powered Sustainability
EY_Graph Database Powered SustainabilityEY_Graph Database Powered Sustainability
EY_Graph Database Powered SustainabilityNeo4j
 
Folding Cheat Sheet #4 - fourth in a series
Folding Cheat Sheet #4 - fourth in a seriesFolding Cheat Sheet #4 - fourth in a series
Folding Cheat Sheet #4 - fourth in a seriesPhilip Schwarz
 
React Server Component in Next.js by Hanief Utama
React Server Component in Next.js by Hanief UtamaReact Server Component in Next.js by Hanief Utama
React Server Component in Next.js by Hanief UtamaHanief Utama
 

Recently uploaded (20)

Building a General PDE Solving Framework with Symbolic-Numeric Scientific Mac...
Building a General PDE Solving Framework with Symbolic-Numeric Scientific Mac...Building a General PDE Solving Framework with Symbolic-Numeric Scientific Mac...
Building a General PDE Solving Framework with Symbolic-Numeric Scientific Mac...
 
Unveiling Design Patterns: A Visual Guide with UML Diagrams
Unveiling Design Patterns: A Visual Guide with UML DiagramsUnveiling Design Patterns: A Visual Guide with UML Diagrams
Unveiling Design Patterns: A Visual Guide with UML Diagrams
 
Maximizing Efficiency and Profitability with OnePlan’s Professional Service A...
Maximizing Efficiency and Profitability with OnePlan’s Professional Service A...Maximizing Efficiency and Profitability with OnePlan’s Professional Service A...
Maximizing Efficiency and Profitability with OnePlan’s Professional Service A...
 
英国UN学位证,北安普顿大学毕业证书1:1制作
英国UN学位证,北安普顿大学毕业证书1:1制作英国UN学位证,北安普顿大学毕业证书1:1制作
英国UN学位证,北安普顿大学毕业证书1:1制作
 
Dealing with Cultural Dispersion — Stefano Lambiase — ICSE-SEIS 2024
Dealing with Cultural Dispersion — Stefano Lambiase — ICSE-SEIS 2024Dealing with Cultural Dispersion — Stefano Lambiase — ICSE-SEIS 2024
Dealing with Cultural Dispersion — Stefano Lambiase — ICSE-SEIS 2024
 
Building Real-Time Data Pipelines: Stream & Batch Processing workshop Slide
Building Real-Time Data Pipelines: Stream & Batch Processing workshop SlideBuilding Real-Time Data Pipelines: Stream & Batch Processing workshop Slide
Building Real-Time Data Pipelines: Stream & Batch Processing workshop Slide
 
What are the key points to focus on before starting to learn ETL Development....
What are the key points to focus on before starting to learn ETL Development....What are the key points to focus on before starting to learn ETL Development....
What are the key points to focus on before starting to learn ETL Development....
 
Der Spagat zwischen BIAS und FAIRNESS (2024)
Der Spagat zwischen BIAS und FAIRNESS (2024)Der Spagat zwischen BIAS und FAIRNESS (2024)
Der Spagat zwischen BIAS und FAIRNESS (2024)
 
MYjobs Presentation Django-based project
MYjobs Presentation Django-based projectMYjobs Presentation Django-based project
MYjobs Presentation Django-based project
 
Advancing Engineering with AI through the Next Generation of Strategic Projec...
Advancing Engineering with AI through the Next Generation of Strategic Projec...Advancing Engineering with AI through the Next Generation of Strategic Projec...
Advancing Engineering with AI through the Next Generation of Strategic Projec...
 
Automate your Kamailio Test Calls - Kamailio World 2024
Automate your Kamailio Test Calls - Kamailio World 2024Automate your Kamailio Test Calls - Kamailio World 2024
Automate your Kamailio Test Calls - Kamailio World 2024
 
Implementing Zero Trust strategy with Azure
Implementing Zero Trust strategy with AzureImplementing Zero Trust strategy with Azure
Implementing Zero Trust strategy with Azure
 
(Genuine) Escort Service Lucknow | Starting ₹,5K To @25k with A/C 🧑🏽‍❤️‍🧑🏻 89...
(Genuine) Escort Service Lucknow | Starting ₹,5K To @25k with A/C 🧑🏽‍❤️‍🧑🏻 89...(Genuine) Escort Service Lucknow | Starting ₹,5K To @25k with A/C 🧑🏽‍❤️‍🧑🏻 89...
(Genuine) Escort Service Lucknow | Starting ₹,5K To @25k with A/C 🧑🏽‍❤️‍🧑🏻 89...
 
Cloud Data Center Network Construction - IEEE
Cloud Data Center Network Construction - IEEECloud Data Center Network Construction - IEEE
Cloud Data Center Network Construction - IEEE
 
办理学位证(UQ文凭证书)昆士兰大学毕业证成绩单原版一模一样
办理学位证(UQ文凭证书)昆士兰大学毕业证成绩单原版一模一样办理学位证(UQ文凭证书)昆士兰大学毕业证成绩单原版一模一样
办理学位证(UQ文凭证书)昆士兰大学毕业证成绩单原版一模一样
 
Intelligent Home Wi-Fi Solutions | ThinkPalm
Intelligent Home Wi-Fi Solutions | ThinkPalmIntelligent Home Wi-Fi Solutions | ThinkPalm
Intelligent Home Wi-Fi Solutions | ThinkPalm
 
Hot Sexy call girls in Patel Nagar🔝 9953056974 🔝 escort Service
Hot Sexy call girls in Patel Nagar🔝 9953056974 🔝 escort ServiceHot Sexy call girls in Patel Nagar🔝 9953056974 🔝 escort Service
Hot Sexy call girls in Patel Nagar🔝 9953056974 🔝 escort Service
 
EY_Graph Database Powered Sustainability
EY_Graph Database Powered SustainabilityEY_Graph Database Powered Sustainability
EY_Graph Database Powered Sustainability
 
Folding Cheat Sheet #4 - fourth in a series
Folding Cheat Sheet #4 - fourth in a seriesFolding Cheat Sheet #4 - fourth in a series
Folding Cheat Sheet #4 - fourth in a series
 
React Server Component in Next.js by Hanief Utama
React Server Component in Next.js by Hanief UtamaReact Server Component in Next.js by Hanief Utama
React Server Component in Next.js by Hanief Utama
 

Angular in the Enterprise

  • 1.
  • 3.
  • 4.
  • 5.
  • 6. Google AngularJS Style Guide https://google-styleguide.googlecode.com/svn/trunk/angularjs-google-style.html
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13. ‘use strict’ angular.controller(‘myController’, [‘$scope’, ’$location’, ’fooService’, ’barService’, function($scope, $location, fooService, barService){ … }]); Typical Module Definition
  • 14. (function(){ ‘use strict’ var ctrlName = “myController”; angular.controller(ctrlName, [‘$scope’, ‘$location’, ‘fooService’, ‘barService’, myController]); function myController($scope, $location, fooService, barService){ … } }());
  • 15. AngularJS 2.0 Router Design Document https://docs.google.com/document/d/1I3UC0RrgCh9CKrLxeE4sxwmNSBl3oSXQGt9g3KZnTJI/edit Route Management
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24. /** * Custom checkbox style for app * * Usage: * <custom-checkbox * checked=“checkedVal” // boolean * predicate=“predicateVal”> // string * </custom-checkbox> * */ app.directive(‘customCheckbox’, function(){ return { scope: { ‘checked’:’=‘, ‘predicate’:’=‘ } … } }); app.directive(‘customCheckbox’, function(){ return { scope: { ‘checked’:’=‘, ‘predicate’:’=‘ } … } });
  • 25.
  • 26.
  • 27.
  • 28.
  • 29. Ctrl + Alt + I Cmd + Alt + I
  • 30.
  • 31.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39. How do I “think in AngularJS” if I have a jQuery background? http://stackoverflow.com/questions/14994391/how-do-i-think-in-angularjs-if-i-have-a-jquery- background Service vs Provider vs Factory http://stackoverflow.com/questions/15666048/angular-js-service-vs-provider-vs-factory Difference Between ‘Link’, ‘Controller’ and ‘Compile’ for Directives http://stackoverflow.com/questions/12546945/difference-between-the-controller-link-and- compile-functions-when-definin Understanding Scopes https://github.com/angular/angular.js/wiki/Understanding-Scopes