AngularJS Beginners Workshop
Download as pptx, pdf7 likes4,377 views
The document outlines a beginner's workshop on AngularJS, detailing its history, features, and fundamental concepts such as two-way data binding and MVC architecture. It includes practical examples and instructions on using AngularJS directives, expressions, and modules, as well as comparisons with jQuery. Additionally, it references resources for further learning and sample projects for application development.
1 of 42
Downloaded 200 times
Ad
Recommended
AngularJS intro
AngularJS introdizabl AngularJS is a JavaScript MVC framework that makes it easier to build single-page applications. It deemphasizes DOM manipulation and uses data binding to synchronize data between models and views. Some key features include routing, dependency injection, testing capabilities, and directives that extend HTML with new attributes and elements. AngularJS applications use controllers to decorate a scope with model data and callbacks. The scope then synchronizes changes between the model and view.
Angularjs Basics
Angularjs BasicsAnuradha Bandara The document discusses how web pages are created using HTML, CSS, and JavaScript. It explains the Document Object Model (DOM) and how JavaScript can manipulate the DOM. It then provides an overview of AngularJS including what it is, how it works, and some key concepts like directives, dependency injection, services, and data binding.
Introduction to AngularJS
Introduction to AngularJSJussi Pohjolainen This document provides an overview and introduction to single page application (SPA) frameworks using AngularJS. It discusses the rise of responsive SPAs and some of the challenges in building SPAs. It then introduces key AngularJS concepts like templates, directives, expressions, data binding, scopes, controllers and modules. It also includes a recap of JavaScript concepts like objects, functions and classes. Finally, it demonstrates basic AngularJS examples using directives, expressions, filters, controllers and scopes.
Angular JS - Introduction
Angular JS - IntroductionSagar Acharya AngularJS is a JavaScript framework for building single-page applications. It enhances HTML with new attributes and uses MVC/MVVM patterns. Key features include data binding, directives, filters, expressions and dependency injection. AngularJS makes it easier to organize web apps at the client-side by defining ways to structure code and adding custom tags/attributes to HTML. It also helps with common tasks in SPAs like routing, data loading and handling user events.
Introduction to Angularjs
Introduction to AngularjsManish Shekhawat AngularJS is a JavaScript framework for building dynamic web applications. It augments HTML with custom attributes and directives to bind data and behaviors to the DOM. Key features include two-way data binding, reusable components, dependency injection, routing, and templating. AngularJS uses an MVC or MVVM pattern, with scopes providing the view model. The framework enhances HTML, encourages test-driven development, and makes single page apps possible.
Angular js architecture (v1.4.8)
Angular js architecture (v1.4.8)Gabi Costel Lapusneanu 1) Angular JS modules allow you to organize an application into specific modules that contain controllers, services, filters and directives. A module is created using angular.module and can be retrieved later on.
2) Dependency injection in Angular allows components to receive dependencies from the injector. Dependencies can be annotated inline, through the $inject property or implicitly.
3) Data binding in Angular automatically synchronizes data between the model and view. The view reflects changes made to the model and vice versa using bindings like {{expression}} or ngBind.
The AngularJS way
The AngularJS wayBoyan Mihaylov The document presents an overview of AngularJS, highlighting its benefits for handling complex clients and its use of the MV* pattern. Key components discussed include modules, controllers, directives, filters, and services, detailing their roles and functionalities within an AngularJS application. The content also emphasizes the significance of dependency injection and the structure of scopes in efficiently managing the application state.
Practical AngularJS
Practical AngularJSWei Ru This document serves as a comprehensive guide to AngularJS, highlighting its fundamentals, features, and architecture. It covers topics such as single-page applications, two-way data binding, the structure of AngularJS applications, controllers, services, directives, and testing methodologies. Additionally, it includes practical examples and hands-on sessions for learning AngularJS development.
AngularJS Best Practices
AngularJS Best PracticesNarek Mamikonyan The document provides a comprehensive overview of AngularJS, including its features, best practices, and optimization tips for both AngularJS 1.x and 2.0. It discusses modularity, dependency injection, directives, two-way binding, and various performance enhancements. Additionally, it covers usage guidelines for controllers, services, and scopes, as well as recommendations for improving efficiency in web applications built with AngularJS.
Angular js for beginners
Angular js for beginnersMunir Hoque The document provides a quick overview of AngularJS, highlighting its features such as two-way data binding, MVC architecture, and HTML templating. It explains key concepts like directives, controllers, and services, and how they interact within an AngularJS application. Additionally, the document includes basic code examples to illustrate the use of various AngularJS components.
AngularJS - What is it & Why is it awesome ? (with demos)
AngularJS - What is it & Why is it awesome ? (with demos)Gary Arora The document introduces Angular, clarifying what it is and what it is not, while highlighting its key features such as MVC design, two-way data binding, and support for single-page applications (SPAs). It emphasizes the benefits of using Angular for creating maintainable web applications and its strong testing capabilities. Additionally, it provides resources for further learning about AngularJS.
Introduction of angular js
Introduction of angular jsTamer Solieman The document provides an introduction to AngularJS, covering its purpose as a framework developed by Google to standardize web application development. It discusses key features such as bootstrapping, templates, two-way data binding, dependency injection, routing, and custom directives. Additionally, it includes examples of how to implement these features in a web application context.
Step by Step - AngularJS
Step by Step - AngularJSInfragistics The document outlines a webinar on AngularJS presented by Dhananjay Kumar, covering topics such as setting up a development environment, understanding the $scope and $rootscope objects, controllers, services, CRUD operations, and directives in AngularJS. It emphasizes coding practices and the creation of custom directives, with a focus on how data is managed across different scopes. Additionally, the document highlights an opportunity for attendees to trial products from Infragistics and encourages engagement via social media.
AngularJS best-practices
AngularJS best-practicesHenry Tao The document outlines best practices for building applications with AngularJS. It discusses the differences between single page apps built with AngularJS and traditional apps, recommending approaches like following AngularJS style guides. The document also summarizes upcoming features for AngularJS 2.0 like improved directives and server-side rendering. Resources are provided for tools like Grunt, Bower, and techniques like search engine optimization for single page apps.
Introduction to Angular JS
Introduction to Angular JSSanthosh Kumar Srinivasan This document provides an introduction to AngularJS, a flexible and extensible JavaScript framework designed for developing web applications. It covers key concepts such as MVC architecture, dependency injection, directives, and data binding, along with examples of markup and script. Additionally, the document mentions tools for AngularJS development, including Yeoman, Karma, and various IDEs, to facilitate effective application building and testing.
Angular js
Angular jsBehind D Walls The document provides an overview of AngularJS, including its core concepts and how it can be used with Java frameworks like Spring, Struts, and Hibernate. AngularJS is an open-source JavaScript framework that assists with building single-page applications using MVC architecture. It allows developers to specify custom HTML tags and directives to control element behavior. The document then discusses key AngularJS concepts like data binding, directives, expressions, filters, controllers, dependency injection, views/routing, and services. It provides examples of how these concepts work and how AngularJS can integrate with Java frameworks in a sample reader application divided into multiple sub-projects.
Introduction to AngularJS
Introduction to AngularJSDavid Parsons AngularJS is an open source JavaScript framework maintained by Google that extends HTML with new elements and attributes. It uses a Model-View-Whatever architecture to develop single-page applications. Key AngularJS components include directives, expressions, and controllers that allow two-way data binding between models and views.
AngularJS in 60ish Minutes
AngularJS in 60ish MinutesDan Wahlin The document provides an overview of AngularJS, focusing on its features for building single-page applications (SPA) such as directives, filters, data binding, and routing. It includes practical examples of using controllers, views, and factories, demonstrating how to create and manage dynamic content within an application. Additionally, it offers resources for further learning and tutorials related to AngularJS development.
Why angular js Framework
Why angular js Framework Sakthi Bro The document provides an overview of AngularJS, an advanced JavaScript framework founded by Misco Hevery, emphasizing its advantages such as reduced coding time and improved user interface design. It outlines the basic structure of an AngularJS application, including elements like controllers and the use of $scope. The document also highlights features like single-page applications (SPAs), various Angular services, and dependency injection.
Angular js PPT
Angular js PPTImtiyaz Ahmad Khan AngularJS is a JavaScript framework that extends HTML with directives and binds data to HTML with expressions. Some key points:
- AngularJS extends HTML with directives like ng-app, ng-model, and ng-bind.
- Expressions written with double braces like {{expression}} output data on the HTML page.
- Modules define AngularJS applications and controllers control the application logic and data.
- Common directives include ng-init, ng-click, ng-repeat, and filters like currency and lowercase can be used.
- A shopping cart example demonstrates binding data with ng-repeat, adding items with ng-click, and removing with ng-click.
AngularJs presentation
AngularJs presentation Phan Tuan AngularJS is a JavaScript framework designed for building dynamic web applications by enhancing HTML with a rich set of features like two-way data binding, dependency injection, and a modular structure that increases code maintainability and readability. It uses a model-view-controller (MVC) pattern and provides directives to extend HTML's capabilities, allowing developers to create interactive and dynamic content. Key concepts include scope inheritance, dirty checking, and the use of services injected via a provider, ensuring efficient management of dependencies and application state.
Advanced Tips & Tricks for using Angular JS
Advanced Tips & Tricks for using Angular JSSimon Guest The document presents a comprehensive overview of advanced tips and tricks for using AngularJS, focusing on project structure, performance optimization, and handling non-Angular dependencies. It emphasizes the importance of separating concerns within the application, managing scope effectively, and improving user experience during loading times. Additionally, the document addresses support for Internet Explorer, minification challenges, and tools for enhancing the development environment.
Angular js tutorial slides
Angular js tutorial slidessamhelman This document is an introductory presentation on AngularJS. It discusses the basic workflow of an AngularJS app from requesting a URL to rendering HTML and executing JavaScript. It also provides an overview of key AngularJS concepts like Model-View-Controller and directives. Finally, it lists additional resources for learning more about AngularJS frameworks, tutorials, documentation and more.
Dynamic Application Development by NodeJS ,AngularJS with OrientDB
Dynamic Application Development by NodeJS ,AngularJS with OrientDBApaichon Punopas This document provides an overview of NodeJS, AngularJS, and how they can be used together with OrientDB for building dynamic applications. It discusses key concepts like non-blocking I/O in NodeJS, MVC architecture in AngularJS, data binding, directives, routing. It also compares performance of NodeJS vs Apache and explains why Angular and NoSQL are well-suited for dynamic applications that require frequent changes - since only the data model and view layers need changes, without requiring changes to the controller code or database schema.
Angular js
Angular jsDinusha Nandika This document provides an overview of Angular JS including its architecture, components like controllers, services, directives and views. It discusses best practices for controllers, creating services, using directives, and avoiding the Flash of Unstyled Content issue. It also mentions the UI-Router module and recommends a file structure for Angular apps. In the end, it lists some pros and cons of Angular JS, noting its two-way binding, component architecture, and rapid development but also potential performance issues with deep object graphs.
AngularJS: an introduction
AngularJS: an introductionLuigi De Russis AngularJS is a JavaScript framework for building frontend web applications. It is inspired by Model-View-Controller (MVC) pattern and uses HTML templating with two-way data binding. Key features include DOM manipulation, validation, routing, and reusable components. The document provides an overview of AngularJS concepts like directives, data binding, controllers, modules, dependency injection, and built-in services. It also demonstrates how to create custom directives and use routing and resources services.
Front end development with Angular JS
Front end development with Angular JSBipin Node package manager (NPM) initializes projects and manages front-end packages. Bower manages client-side packages like jQuery. Grunt and Gulp automate workflows. Yo generates application scaffolding. Angular uses MVC architecture with views, models, and controllers. Data binding syncs models and views. Directives extend HTML. Modules contain components and support dependency injection. Routes define application states. Filters format data. Controllers manipulate scope data. Values, services, and factories support dependency injection of reusable code. Testing uses Karma, Jasmine, and generated test skeletons.
AngularJS One Day Workshop
AngularJS One Day WorkshopShyam Seshadri This document provides an agenda and details for an AngularJS workshop. The key points are:
- The workshop will cover AngularJS concepts and skills over 4 sessions spanning introduction to advanced topics like testing and directives.
- Session 1 will cover basics like MVC patterns, data binding, controllers and services. Sessions 2-3 cover routing, testing and directives.
- Attendees should bring a laptop and install NodeJS, Karma and other tools to follow along with hands-on code examples and exercises.
- The goal is to take attendees through building a simple todo list app from start to finish over the day to learn AngularJS concepts and skills in a practical way. Questions are encouraged
FrontEnd platform based on AngularJS
FrontEnd platform based on AngularJSEgor Miasnikov This document discusses transitioning a customer's application from Backbone to AngularJS. It outlines the customer's current problems with their Backbone application, including lack of documentation, tests, and a standardized structure. It then provides an overview of AngularJS and how it addresses these issues through features like modules, directives, dependency injection and better testability. The document proposes an application architecture using AngularJS with modules for different areas and directives for reusable components. It concludes by discussing using AngularJS for future customers' applications and taking questions.
AngularJS Internal
AngularJS InternalEyal Vardi AngularJS uses a compile process to link directives and scopes. During compilation, it executes factory functions, template functions, compile functions, controllers, pre-link functions and post-link functions for each directive. This process recursively compiles child elements. The compiled output can then be linked with a scope during the linking phase to instantiate the directive.
More Related Content
What's hot (20)
AngularJS Best Practices
AngularJS Best PracticesNarek Mamikonyan The document provides a comprehensive overview of AngularJS, including its features, best practices, and optimization tips for both AngularJS 1.x and 2.0. It discusses modularity, dependency injection, directives, two-way binding, and various performance enhancements. Additionally, it covers usage guidelines for controllers, services, and scopes, as well as recommendations for improving efficiency in web applications built with AngularJS.
Angular js for beginners
Angular js for beginnersMunir Hoque The document provides a quick overview of AngularJS, highlighting its features such as two-way data binding, MVC architecture, and HTML templating. It explains key concepts like directives, controllers, and services, and how they interact within an AngularJS application. Additionally, the document includes basic code examples to illustrate the use of various AngularJS components.
AngularJS - What is it & Why is it awesome ? (with demos)
AngularJS - What is it & Why is it awesome ? (with demos)Gary Arora The document introduces Angular, clarifying what it is and what it is not, while highlighting its key features such as MVC design, two-way data binding, and support for single-page applications (SPAs). It emphasizes the benefits of using Angular for creating maintainable web applications and its strong testing capabilities. Additionally, it provides resources for further learning about AngularJS.
Introduction of angular js
Introduction of angular jsTamer Solieman The document provides an introduction to AngularJS, covering its purpose as a framework developed by Google to standardize web application development. It discusses key features such as bootstrapping, templates, two-way data binding, dependency injection, routing, and custom directives. Additionally, it includes examples of how to implement these features in a web application context.
Step by Step - AngularJS
Step by Step - AngularJSInfragistics The document outlines a webinar on AngularJS presented by Dhananjay Kumar, covering topics such as setting up a development environment, understanding the $scope and $rootscope objects, controllers, services, CRUD operations, and directives in AngularJS. It emphasizes coding practices and the creation of custom directives, with a focus on how data is managed across different scopes. Additionally, the document highlights an opportunity for attendees to trial products from Infragistics and encourages engagement via social media.
AngularJS best-practices
AngularJS best-practicesHenry Tao The document outlines best practices for building applications with AngularJS. It discusses the differences between single page apps built with AngularJS and traditional apps, recommending approaches like following AngularJS style guides. The document also summarizes upcoming features for AngularJS 2.0 like improved directives and server-side rendering. Resources are provided for tools like Grunt, Bower, and techniques like search engine optimization for single page apps.
Introduction to Angular JS
Introduction to Angular JSSanthosh Kumar Srinivasan This document provides an introduction to AngularJS, a flexible and extensible JavaScript framework designed for developing web applications. It covers key concepts such as MVC architecture, dependency injection, directives, and data binding, along with examples of markup and script. Additionally, the document mentions tools for AngularJS development, including Yeoman, Karma, and various IDEs, to facilitate effective application building and testing.
Angular js
Angular jsBehind D Walls The document provides an overview of AngularJS, including its core concepts and how it can be used with Java frameworks like Spring, Struts, and Hibernate. AngularJS is an open-source JavaScript framework that assists with building single-page applications using MVC architecture. It allows developers to specify custom HTML tags and directives to control element behavior. The document then discusses key AngularJS concepts like data binding, directives, expressions, filters, controllers, dependency injection, views/routing, and services. It provides examples of how these concepts work and how AngularJS can integrate with Java frameworks in a sample reader application divided into multiple sub-projects.
Introduction to AngularJS
Introduction to AngularJSDavid Parsons AngularJS is an open source JavaScript framework maintained by Google that extends HTML with new elements and attributes. It uses a Model-View-Whatever architecture to develop single-page applications. Key AngularJS components include directives, expressions, and controllers that allow two-way data binding between models and views.
AngularJS in 60ish Minutes
AngularJS in 60ish MinutesDan Wahlin The document provides an overview of AngularJS, focusing on its features for building single-page applications (SPA) such as directives, filters, data binding, and routing. It includes practical examples of using controllers, views, and factories, demonstrating how to create and manage dynamic content within an application. Additionally, it offers resources for further learning and tutorials related to AngularJS development.
Why angular js Framework
Why angular js Framework Sakthi Bro The document provides an overview of AngularJS, an advanced JavaScript framework founded by Misco Hevery, emphasizing its advantages such as reduced coding time and improved user interface design. It outlines the basic structure of an AngularJS application, including elements like controllers and the use of $scope. The document also highlights features like single-page applications (SPAs), various Angular services, and dependency injection.
Angular js PPT
Angular js PPTImtiyaz Ahmad Khan AngularJS is a JavaScript framework that extends HTML with directives and binds data to HTML with expressions. Some key points:
- AngularJS extends HTML with directives like ng-app, ng-model, and ng-bind.
- Expressions written with double braces like {{expression}} output data on the HTML page.
- Modules define AngularJS applications and controllers control the application logic and data.
- Common directives include ng-init, ng-click, ng-repeat, and filters like currency and lowercase can be used.
- A shopping cart example demonstrates binding data with ng-repeat, adding items with ng-click, and removing with ng-click.
AngularJs presentation
AngularJs presentation Phan Tuan AngularJS is a JavaScript framework designed for building dynamic web applications by enhancing HTML with a rich set of features like two-way data binding, dependency injection, and a modular structure that increases code maintainability and readability. It uses a model-view-controller (MVC) pattern and provides directives to extend HTML's capabilities, allowing developers to create interactive and dynamic content. Key concepts include scope inheritance, dirty checking, and the use of services injected via a provider, ensuring efficient management of dependencies and application state.
Advanced Tips & Tricks for using Angular JS
Advanced Tips & Tricks for using Angular JSSimon Guest The document presents a comprehensive overview of advanced tips and tricks for using AngularJS, focusing on project structure, performance optimization, and handling non-Angular dependencies. It emphasizes the importance of separating concerns within the application, managing scope effectively, and improving user experience during loading times. Additionally, the document addresses support for Internet Explorer, minification challenges, and tools for enhancing the development environment.
Angular js tutorial slides
Angular js tutorial slidessamhelman This document is an introductory presentation on AngularJS. It discusses the basic workflow of an AngularJS app from requesting a URL to rendering HTML and executing JavaScript. It also provides an overview of key AngularJS concepts like Model-View-Controller and directives. Finally, it lists additional resources for learning more about AngularJS frameworks, tutorials, documentation and more.
Dynamic Application Development by NodeJS ,AngularJS with OrientDB
Dynamic Application Development by NodeJS ,AngularJS with OrientDBApaichon Punopas This document provides an overview of NodeJS, AngularJS, and how they can be used together with OrientDB for building dynamic applications. It discusses key concepts like non-blocking I/O in NodeJS, MVC architecture in AngularJS, data binding, directives, routing. It also compares performance of NodeJS vs Apache and explains why Angular and NoSQL are well-suited for dynamic applications that require frequent changes - since only the data model and view layers need changes, without requiring changes to the controller code or database schema.
Angular js
Angular jsDinusha Nandika This document provides an overview of Angular JS including its architecture, components like controllers, services, directives and views. It discusses best practices for controllers, creating services, using directives, and avoiding the Flash of Unstyled Content issue. It also mentions the UI-Router module and recommends a file structure for Angular apps. In the end, it lists some pros and cons of Angular JS, noting its two-way binding, component architecture, and rapid development but also potential performance issues with deep object graphs.
AngularJS: an introduction
AngularJS: an introductionLuigi De Russis AngularJS is a JavaScript framework for building frontend web applications. It is inspired by Model-View-Controller (MVC) pattern and uses HTML templating with two-way data binding. Key features include DOM manipulation, validation, routing, and reusable components. The document provides an overview of AngularJS concepts like directives, data binding, controllers, modules, dependency injection, and built-in services. It also demonstrates how to create custom directives and use routing and resources services.
Front end development with Angular JS
Front end development with Angular JSBipin Node package manager (NPM) initializes projects and manages front-end packages. Bower manages client-side packages like jQuery. Grunt and Gulp automate workflows. Yo generates application scaffolding. Angular uses MVC architecture with views, models, and controllers. Data binding syncs models and views. Directives extend HTML. Modules contain components and support dependency injection. Routes define application states. Filters format data. Controllers manipulate scope data. Values, services, and factories support dependency injection of reusable code. Testing uses Karma, Jasmine, and generated test skeletons.
AngularJS One Day Workshop
AngularJS One Day WorkshopShyam Seshadri This document provides an agenda and details for an AngularJS workshop. The key points are:
- The workshop will cover AngularJS concepts and skills over 4 sessions spanning introduction to advanced topics like testing and directives.
- Session 1 will cover basics like MVC patterns, data binding, controllers and services. Sessions 2-3 cover routing, testing and directives.
- Attendees should bring a laptop and install NodeJS, Karma and other tools to follow along with hands-on code examples and exercises.
- The goal is to take attendees through building a simple todo list app from start to finish over the day to learn AngularJS concepts and skills in a practical way. Questions are encouraged
Viewers also liked (12)
FrontEnd platform based on AngularJS
FrontEnd platform based on AngularJSEgor Miasnikov This document discusses transitioning a customer's application from Backbone to AngularJS. It outlines the customer's current problems with their Backbone application, including lack of documentation, tests, and a standardized structure. It then provides an overview of AngularJS and how it addresses these issues through features like modules, directives, dependency injection and better testability. The document proposes an application architecture using AngularJS with modules for different areas and directives for reusable components. It concludes by discussing using AngularJS for future customers' applications and taking questions.
AngularJS Internal
AngularJS InternalEyal Vardi AngularJS uses a compile process to link directives and scopes. During compilation, it executes factory functions, template functions, compile functions, controllers, pre-link functions and post-link functions for each directive. This process recursively compiles child elements. The compiled output can then be linked with a scope during the linking phase to instantiate the directive.
AngularJS: Service, factory & provider
AngularJS: Service, factory & providerCorley S.r.l. The document discusses dependency injection in AngularJS 1.x and Angular 2. In AngularJS 1.x, services, factories, and providers control how components are registered and instantiated. Services are always singletons, while factories and providers allow more control over instantiation. Angular 2 introduces the concepts of injectors, providers, and dependencies to describe how dependencies are created and injected. Providers are recipes that map tokens to factory functions to create objects. Angular 2 provides more control over dependency lifecycles through features like factories, transient instances, scoped injectors, and component bindings.
Dependency injection
Dependency injectionMindfire Solutions The document discusses dependency injection with Spring. It defines dependency injection as a design pattern that allows removing hardcoded dependencies and changing them at runtime. It presents different types of dependency injection like setter and constructor injection. It demonstrates how to configure dependency injection with Spring using XML configuration files or annotations and inject dependencies into objects. Benefits of dependency injection include easier testing, improved reusability, and cleaner code.
Building Modern Web Apps with AngularJS
Building Modern Web Apps with AngularJSRaveen Perera This document provides an overview of building modern web applications with AngularJS. It discusses key concepts like single page applications, traditional vs SPA architectures, and techniques/frameworks like Ajax, WebSockets, and AngularJS. It then explains core AngularJS concepts like directives, services, modules/controllers, expressions, routes, views/templates, and using ng-repeat with directives. Services in AngularJS allow sharing reusable functions across the application.
III - Better angularjs
III - Better angularjsWebF The document discusses Test Driven Development (TDD) in relation to AngularJS, emphasizing the importance of writing testable code that is efficient and maintainable. It outlines the core principles of Angular, including data binding, separation of concerns through directives, and dependency injection to enhance testability. Additionally, it covers challenges in front-end testing and how the Angular framework addresses these issues through modular design and optimized patterns.
Scope demystified - AngularJS
Scope demystified - AngularJSSumanth krishna The document explains the concept of scope in AngularJS, detailing its lifecycle, hierarchy, and the process of creation and destruction. It describes how scopes are utilized for data binding between the model and the DOM, including methods for watching and propagating changes within the application. Key functionalities like $apply, $digest, and event propagation using $broadcast and $emit are also covered, along with performance considerations for efficient dirty checking.
Angular 1.5 Components
Angular 1.5 ComponentsJosé Barbosa The document discusses the transition from AngularJS to Angular components, covering key lifecycle hooks like $onInit, $postLink, $onChanges, and $onDestroy. It highlights changes in directive syntax, such as from 'scope' to 'bindings', and emphasizes the use of stateless components. Additionally, it provides links to resources for further exploration on Angular 1.5 components and lifecycle methods.
AngularJs Crash Course
AngularJs Crash CourseKeith Bloomfield The document is a comprehensive overview of AngularJS, focusing on its architecture, key concepts like data binding, controllers, directives, and dependency injection. It covers the framework's capabilities for building single-page applications and highlights real-world challenges and solutions encountered by developers. Furthermore, it addresses testing methodologies, best practices, and the continuous integration process with tools like Jenkins and Protractor.
Creating GUI Component APIs in Angular and Web Components
Creating GUI Component APIs in Angular and Web ComponentsRachael L Moore The document outlines the creation of GUI component APIs in Angular and Web Components, particularly focusing on a custom confirmation modal component. It discusses the implementation details, including pseudocode for handling confirmation requests and interactions with standard elements. The presentation highlights how to integrate custom elements into Angular applications for improved user experience.
Introduction to AngularJs
Introduction to AngularJsmurtazahaveliwala The document is a presentation by Murtaza Haveliwala on AngularJS, covering its benefits, features, and best practices for usage. It outlines the anatomy of an Angular app, data binding, directives, services, and dependency injection, providing examples and demos. The presentation also emphasizes the importance of testing and offers various resources for further learning.
AngularJS Architecture
AngularJS ArchitectureEyal Vardi AngularJS uses a compile function to parse HTML into DOM elements and compile directives. The compile function sorts directives by priority and executes their compile and link functions to connect the scope to the DOM. It recursively compiles child elements. This allows directives to manipulate DOM elements and register behavior.
Ad
Similar to AngularJS Beginners Workshop (20)
Angularjs for kolkata drupal meetup
Angularjs for kolkata drupal meetupGoutam Dey This document provides an overview of AngularJS, including its history, key features, and how it works. It originated at Google and was open-sourced in 2009. Some key features include two-way data binding, separation of model and view, and being unit testable. It uses MVC architecture with declarative coding. Core concepts covered include directives like ng-app, ng-model, expressions, scopes, controllers, views, filters, routing, and dependency injection.
Angular js
Angular jsMauro Servienti - The document discusses AngularJS and single page applications. It provides an introduction and overview of key AngularJS concepts including modules, controllers, views, services, dependency injection, and filters.
- Code samples and demos are referenced to illustrate concepts in more depth. Challenges with SEO and the benefits of TypeScript for adding type safety to JavaScript are also mentioned.
Integrating AngularJS into the Campus CMS
Integrating AngularJS into the Campus CMSTom Borger The document provides an overview of AngularJS, a framework for building client-side JavaScript applications, detailing its benefits such as data binding, built-in components, and ease of integration with existing systems. It presents examples of how AngularJS works, highlighting directives and controllers, as well as some caveats regarding learning, documentation, and compatibility issues. Additionally, it mentions the anticipated changes in future versions while reassuring users of continued support for the current version.
Angularjs
AngularjsSabin Tamrakar AngularJS is a JavaScript MVC framework created by Google to build maintainable web applications. It was released in 2012 and focuses on HTML and MVC/MVVM design patterns. Key features include data binding, controllers, directives, expressions, forms, modules, scopes, dependency injection, filters and services.
Angular js
Angular jsyogi_solanki This document provides an overview of AngularJS, including what it is, how it uses MVC architecture, data binding, views, controllers, models, modules, and routing. AngularJS is an open-source JavaScript framework that uses MVC pattern and two-way data binding. It allows creating dynamic web applications using HTML as the template language and allows binding data and behavior to HTML.
Tech io spa_angularjs_20130814_v0.9.5
Tech io spa_angularjs_20130814_v0.9.5Ganesh Kondal This document provides an overview of single page applications (SPAs) and AngularJS. It discusses why SPAs are useful, how they work, and key aspects of AngularJS like data binding, directives, routing, and dependency injection. Code samples are presented to demonstrate basic concepts like data binding, controllers, filters, and building an e-commerce application with routing and services. Future sessions are proposed to cover integration with Node.js backends, testing with Karma, and custom directives.
End to-End SPA Development Using ASP.NET and AngularJS
End to-End SPA Development Using ASP.NET and AngularJSGil Fink This document discusses end-to-end single page application development using ASP.NET and AngularJS. It begins with an introduction to SPAs and their benefits. It then covers key SPA building blocks like HTML5, JavaScript libraries, Ajax, REST, routing, and AngularJS components like controllers, services, directives and routing. It demonstrates using ASP.NET MVC and Web API for the backend API and services. AngularJS is used for the frontend framework. The presentation includes demos of key concepts and a full example app to demonstrate an end-to-end SPA. It concludes with questions and resources for further learning.
Angular js
Angular jsHritesh Saha This document provides an overview of AngularJS, including what it is, how it uses MVC architecture, data binding, views, controllers, models, modules, routing, and more. Some key points are:
- AngularJS is an open-source JavaScript framework that uses MVC pattern for building dynamic web apps
- It uses data binding so changes to models and data are automatically reflected in views
- Views use directives like ng-repeat and ng-if to interact with models and controllers
- Controllers contain business logic and models contain application data
- Modules are used to separate an app into components and routing manages multiple views
Angular JS, A dive to concepts
Angular JS, A dive to conceptsAbhishek Sur The document discusses AngularJS, a JavaScript MVC framework developed by Google for building maintainable web applications, particularly Single Page Applications (SPAs). It covers key features such as directives, data binding, and MVC/MVVM design patterns, while also emphasizing the framework's advantages like improved organization and use of HTML for application development. The document includes practical demonstrations and highlights the resources available for learning AngularJS.
AngularJS
AngularJSYogesh L AngularJS is a framework for building client-side web applications. It uses HTML as the template language and extends HTML attributes with directives. AngularJS applications are made up of modules that contain controllers, services, and directives to add dynamic behavior. Data binding in Angular updates the view automatically when the model changes. Key features include directives, two-way data binding, MVC pattern, dependency injection and routing.
Valentine with Angular js - Introduction
Valentine with Angular js - IntroductionSenthil Kumar This document provides an overview of AngularJS, including what it is, why it is useful, basic concepts, and how to get started. AngularJS is an open-source JavaScript framework for building single-page applications. It uses HTML as the template language and allows binding data to HTML elements. Some key benefits are less boilerplate code, improved maintainability through separation of concerns using an MVC pattern, and efficient development through features like data binding. The document outlines how to include AngularJS scripts, core concepts like directives, controllers and models, and recommends resources for learning more.
Angular js for Beginnners
Angular js for BeginnnersSantosh Kumar Kar AngularJS is a JavaScript MVC framework that allows developers to create dynamic web applications. It uses HTML as the template language and allows two-way data binding between models and views. Some key features include directives, modules, controllers, services and filters. AngularJS applications can be unit tested and services can be injected for dependency injection. Routing in AngularJS allows single page applications without reloading the entire page.
AngularJs Basic Concept
AngularJs Basic ConceptHari Haran AngularJS is an open-source JavaScript framework developed by Google for building single-page web applications, notable for its ability to enhance HTML with directives and data binding without needing page reloads. It features a modular architecture, allowing for the organization of controllers, services, and directives, with initialization directives like ng-app and ng-init to set up the application. Controllers manage application behavior using the $scope object, and services provide reusable functions for various tasks throughout the app.
Advanced AngularJS Tips and Tricks
Advanced AngularJS Tips and TricksJeremy Likness The document presents advanced Angular tips and tricks by Jeremy Likness, addressing key areas such as integration, best practices, debugging, and performance optimization based on extensive experience in enterprise AngularJS projects. It emphasizes the importance of structured code, early testing, and effective communication through services, while also providing practical advice on integrating third-party components and enhancing application performance. Resources for further learning are also included, such as courses and a GitHub repository for examples.
Angular js
Angular jsLarry Ball AngularJS is a JavaScript framework for building web applications using MVC architecture. It separates an application into three main components: models, views, and controllers. Scopes provide the link between models and views by allowing views to watch models and propagate changes. AngularJS differs from jQuery in that it focuses on designing the architecture first before building the application and views. Key features include data binding, dependency injection, and directives like ng-repeat and ng-src to manipulate the DOM.
Angularjs beginners-workshop1
Angularjs beginners-workshop1Jugnu Sharma The document provides an overview of AngularJS, including its origins at Google, key features like two-way binding and separation of model and view, modules, directives, expressions, controllers, and differences from jQuery. It also lists resources for learning more about AngularJS.
AngularJS
AngularJSMahmoud Tolba This document contains an agenda for an AngularJS training that covers: Introduction to AngularJS modules; Controllers; Filters and expressions; Directives; Factories; Services; Routing; and AngularJS unit testing. The training will provide an overview of AngularJS advantages and life cycle, and compare AngularJS to other frameworks such as Backbone and Ember.
When to use and when not to use AngularJS - Liju Pillai, www.perfomatix.com
When to use and when not to use AngularJS - Liju Pillai, www.perfomatix.comPerfomatix Solutions The document provides an overview of AngularJS, a client-side framework maintained by Google, highlighting its core concepts, modules, controllers, services, filters, and directives. It discusses when to use AngularJS, such as for single-page applications (SPAs), and when not to, such as in applications requiring intensive DOM manipulation. Additionally, it offers resources for further learning and development tools related to AngularJS.
Angular patterns
Angular patternsPremkumar M This document provides an overview of AngularJS including its advantages, uses, required tools, architecture, key concepts like directives, filters, dependency injection and services. AngularJS is a JavaScript MVC framework created by Google that focuses on the HTML side of web apps. It enhances HTML with directives, templates and bindings and is well-suited for single page apps. Development requires a code editor, browser and optional tools like NodeJS, GitHub, NPM and Gulp. The document outlines Angular's modular structure and core components like controllers, modules and scopes.
Angular js for enteprise application
Angular js for enteprise applicationvu van quyet The document provides a comprehensive overview of using AngularJS for enterprise applications, covering key features like templates, data-binding, and MVC architecture. It discusses the pros and cons of AngularJS, including difficulties in learning and performance issues, while also highlighting best practices like style guides and application structure. Additional topics include component communication, routing, localization, validation, and testing, alongside examples of demo code for building applications.
Ad
More from Sathish VJ (9)
Why Go Lang?
Why Go Lang?Sathish VJ Go is used for many popular projects like Kubernetes, Docker, Prometheus, and Ethereum due to its advantages like being statically compiled, allowing for easy distribution and parallelism. Google migrated its dl.google.com download service from C++ to Go because the Go version was much less code, more readable, testable, and fixed HTTP issues while having equal or better performance. Go's creators aimed to design a language that is simple yet powerful for building reliable and efficient software in the modern era.
Docker and Kubernetes 101 workshop
Docker and Kubernetes 101 workshopSathish VJ This document provides an overview of Docker and Kubernetes concepts and demonstrates how to create and run Docker containers and Kubernetes pods and deployments. It begins with an introduction to virtual machines and containers before demonstrating how to build a Docker image and container. It then introduces Kubernetes concepts like masters, nodes, pods and deployments. The document walks through running example containers and pods using commands like docker run, kubectl run, kubectl get and kubectl delete. It also shows how to create pods and deployments from configuration files and set resource limits.
gething started - ethereum & using the geth golang client
gething started - ethereum & using the geth golang clientSathish VJ - Ethereum is a cryptocurrency like Bitcoin that can be invested in, though it is highly volatile. Its token is called Ether (ETH).
- Ether reached over $1B market cap but is lower now after peaking at around $20 per ETH and currently trading around $7.50.
- There is currently around 90 million Ether in supply with the potential for more to be created through mining rewards and developer funds until Ethereum transitions to proof-of-stake.
Blockchain, bitcoin
Blockchain, bitcoinSathish VJ The document provides definitions and explanations of key concepts related to blockchain technology and cryptocurrencies like Bitcoin. It discusses how blockchain works as a distributed ledger using cryptography and consensus to allow decentralized transactions without intermediaries. It also addresses common questions around how Bitcoin transactions are validated and added to the blockchain through mining processes.
Apps and Hacks Showreel
Apps and Hacks ShowreelSathish VJ The document summarizes a number of open source apps and projects the author has built using technologies like AngularJS, HTML, CSS, JavaScript, Go Lang, Google App Engine, and Google Cloud Platform. It includes brief descriptions of apps and projects like GlowSo, Limitless App, businblr.com, BusInBlr App, WiseViz, SmartRide, custom data visualizations, a PWA for an NGO, and MediaTidy. Contact information is also provided.
Microsoft Ventures Hackday 2014 Bangalore - Limitless App
Microsoft Ventures Hackday 2014 Bangalore - Limitless AppSathish VJ The document discusses advancements in data availability and the challenges posed by its abundance, emphasizing the need for improved comprehension and reading speed. It mentions that our brains can process information faster than we usually do and suggests using alternate inputs to enhance reading capabilities. The mention of a fictional character gaining superhuman reading abilities serves to illustrate the potential for improving comprehension and retention of information.
Smart Ride - our winning Internet of Things hack at the weekend Apigee hackathon
Smart Ride - our winning Internet of Things hack at the weekend Apigee hackathonSathish VJ The document references a YouTube video related to d3.js and provides a GitHub link to a project called 'smartrides' by user sathishvj. It mentions individuals Deepak, Mihal, and Mohith Prabhu in connection with d3.js. Overall, it appears to focus on data visualization and related resources.
Google AppEngine - For GBG Bangalore
Google AppEngine - For GBG BangaloreSathish VJ A presentation I made to the Google Business Group (GBG) Bangalore. The agenda was to provide a view of Google AppEngine usage with a substantial business view of it based on both my technical and business experience on it.
Internet of Things GDG Bangalore 2013
Internet of Things GDG Bangalore 2013Sathish VJ The document discusses the Internet of Things (IoT) in healthcare, emphasizing the high costs and inefficiencies of current medical systems. It explores the potential of various connected devices and sensors for improving patient care, monitoring environments, and enabling data analysis across diverse applications. Additionally, it touches on software architecture and the scalability required to support the integration of numerous IoT devices.
Recently uploaded (20)
Techniques for Automatic Device Identification and Network Assignment.pdf
Techniques for Automatic Device Identification and Network Assignment.pdfPriyanka Aash Techniques for Automatic Device Identification and Network Assignment
Using the SQLExecutor for Data Quality Management: aka One man's love for the...
Using the SQLExecutor for Data Quality Management: aka One man's love for the...Safe Software The SQLExecutor is one of FME’s most powerful and flexible transformers. Pivvot maintains a robust internal metadata hierarchy used to support ingestion and curation of thousands of external data sources that must be managed for quality before entering our platform. By using the SQLExecutor, Pivvot can efficiently detect problems and perform analysis before data is extracted from our staging environment, removing the need for rollbacks or cycles waisted on a failed job. This presentation will walk through three distinct examples of how Pivvot uses the SQLExecutor to engage its metadata hierarchy and integrate with its Data Quality Management workflows efficiently and within the source postgres database. Spatial Validation –Validating spatial prerequisites before entering a production environment. Reference Data Validation - Dynamically validate domain-ed columns across any table and multiple columns per table. Practical De-duplication - Removing identical or near-identical well point locations from two distinct source datasets in the same table.
Coordinated Disclosure for ML - What's Different and What's the Same.pdf
Coordinated Disclosure for ML - What's Different and What's the Same.pdfPriyanka Aash Coordinated Disclosure for ML - What's Different and What's the Same
2025_06_18 - OpenMetadata Community Meeting.pdf
2025_06_18 - OpenMetadata Community Meeting.pdfOpenMetadata The community meetup was held Wednesday June 18, 2025 @ 9:00 AM PST.
Catch the next OpenMetadata Community Meetup @ https://www.meetup.com/openmetadata-meetup-group/
In this month's OpenMetadata Community Meetup, "Enforcing Quality & SLAs with OpenMetadata Data Contracts," we covered data contracts, why they matter, and how to implement them in OpenMetadata to increase the quality of your data assets!
Agenda Highlights:
👋 Introducing Data Contracts: An agreement between data producers and consumers
📝 Data Contracts key components: Understanding a contract and its purpose
🧑🎨 Writing your first contract: How to create your own contracts in OpenMetadata
🦾 An OpenMetadata MCP Server update!
➕ And More!
Powering Multi-Page Web Applications Using Flow Apps and FME Data Streaming
Powering Multi-Page Web Applications Using Flow Apps and FME Data StreamingSafe Software Unleash the potential of FME Flow to build and deploy advanced multi-page web applications with ease. Discover how Flow Apps and FME’s data streaming capabilities empower you to create interactive web experiences directly within FME Platform. Without the need for dedicated web-hosting infrastructure, FME enhances both data accessibility and user experience. Join us to explore how to unlock the full potential of FME for your web projects and seamlessly integrate data-driven applications into your workflows.
OpenPOWER Foundation & Open-Source Core Innovations
OpenPOWER Foundation & Open-Source Core InnovationsIBM penPOWER offers a fully open, royalty-free CPU architecture for custom chip design.
It enables both lightweight FPGA cores (like Microwatt) and high-performance processors (like POWER10).
Developers have full access to source code, specs, and tools for end-to-end chip creation.
It supports AI, HPC, cloud, and embedded workloads with proven performance.
Backed by a global community, it fosters innovation, education, and collaboration.
Improving Data Integrity: Synchronization between EAM and ArcGIS Utility Netw...
Improving Data Integrity: Synchronization between EAM and ArcGIS Utility Netw...Safe Software Utilities and water companies play a key role in the creation of clean drinking water. The creation and maintenance of clean drinking water is becoming a critical problem due to pollution and pressure on the environment. A lot of data is necessary to create clean drinking water. For fieldworkers, two types of data are key: Asset data in an asset management system (EAM for example) and Geographic data in a GIS (ArcGIS Utility Network ). Keeping this type of data up to date and in sync is a challenge for many organizations, leading to duplicating data and creating a bulk of extra attributes and data to keep everything in sync. Using FME, it is possible to synchronize Enterprise Asset Management (EAM) data with the ArcGIS Utility Network in real time. Changes (creation, modification, deletion) in ArcGIS Pro are relayed to EAM via FME, and vice versa. This ensures continuous synchronization of both systems without daily bulk updates, minimizes risks, and seamlessly integrates with ArcGIS Utility Network services. This presentation focuses on the use of FME at a Dutch water company, to create a sync between the asset management and GIS.
cnc-processing-centers-centateq-p-110-en.pdf
cnc-processing-centers-centateq-p-110-en.pdfAmirStern2 מרכז עיבודים תעשייתי בעל 3/4/5 צירים, עד 22 החלפות כלים עם כל אפשרויות העיבוד הדרושות. בעל שטח עבודה גדול ומחשב נוח וקל להפעלה בשפה העברית/רוסית/אנגלית/ספרדית/ערבית ועוד..
מסוגל לבצע פעולות עיבוד שונות המתאימות לענפים שונים: קידוח אנכי, אופקי, ניסור, וכרסום אנכי.
Raman Bhaumik - Passionate Tech Enthusiast
Raman Bhaumik - Passionate Tech EnthusiastRaman Bhaumik A Junior Software Developer with a flair for innovation, Raman Bhaumik excels in delivering scalable web solutions. With three years of experience and a solid foundation in Java, Python, JavaScript, and SQL, she has streamlined task tracking by 20% and improved application stability.
FIDO Seminar: Evolving Landscape of Post-Quantum Cryptography.pptx
FIDO Seminar: Evolving Landscape of Post-Quantum Cryptography.pptxFIDO Alliance FIDO Seminar: Evolving Landscape of Post-Quantum Cryptography
Enhance GitHub Copilot using MCP - Enterprise version.pdf
Enhance GitHub Copilot using MCP - Enterprise version.pdfNilesh Gule Slide deck related to the GitHub Copilot Bootcamp in Melbourne on 17 June 2025
The Future of Technology: 2025-2125 by Saikat Basu.pdf
The Future of Technology: 2025-2125 by Saikat Basu.pdfSaikat Basu A peek into the next 100 years of technology. From Generative AI to Global AI networks to Martian Colonisation to Interstellar exploration to Industrial Nanotechnology to Artificial Consciousness, this is a journey you don't want to miss. Which ones excite you the most? Which ones are you apprehensive about? Feel free to comment! Let the conversation begin!
Creating Inclusive Digital Learning with AI: A Smarter, Fairer Future
Creating Inclusive Digital Learning with AI: A Smarter, Fairer FutureImpelsys Inc. Have you ever struggled to read a tiny label on a medicine box or tried to navigate a confusing website? Now imagine if every learning experience felt that way—every single day.
For millions of people living with disabilities, poorly designed content isn’t just frustrating. It’s a barrier to growth. Inclusive learning is about fixing that. And today, AI is helping us build digital learning that’s smarter, kinder, and accessible to everyone.
Accessible learning increases engagement, retention, performance, and inclusivity for everyone. Inclusive design is simply better design.
OpenACC and Open Hackathons Monthly Highlights June 2025
OpenACC and Open Hackathons Monthly Highlights June 2025OpenACC The OpenACC organization focuses on enhancing parallel computing skills and advancing interoperability in scientific applications through hackathons and training. The upcoming 2025 Open Accelerated Computing Summit (OACS) aims to explore the convergence of AI and HPC in scientific computing and foster knowledge sharing. This year's OACS welcomes talk submissions from a variety of topics, from Using Standard Language Parallelism to Computer Vision Applications. The document also highlights several open hackathons, a call to apply for NVIDIA Academic Grant Program and resources for optimizing scientific applications using OpenACC directives.
OWASP Barcelona 2025 Threat Model Library
OWASP Barcelona 2025 Threat Model LibraryPetraVukmirovic Threat Model Library Launch at OWASP Barcelona 2025
https://owasp.org/www-project-threat-model-library/
PyCon SG 25 - Firecracker Made Easy with Python.pdf
PyCon SG 25 - Firecracker Made Easy with Python.pdfMuhammad Yuga Nugraha Explore the ease of managing Firecracker microVM with the firecracker-python. In this session, I will introduce the basics of Firecracker microVM and demonstrate how this custom SDK facilitates microVM operations easily. We will delve into the design and development process behind the SDK, providing a behind-the-scenes look at its creation and features. While traditional Firecracker SDKs were primarily available in Go, this module brings a simplicity of Python to the table.
FIDO Seminar: Targeting Trust: The Future of Identity in the Workforce.pptx
FIDO Seminar: Targeting Trust: The Future of Identity in the Workforce.pptxFIDO Alliance FIDO Seminar: Targeting Trust: The Future of Identity in the Workforce
Connecting Data and Intelligence: The Role of FME in Machine Learning
Connecting Data and Intelligence: The Role of FME in Machine LearningSafe Software In this presentation, we want to explore powerful data integration and preparation for Machine Learning. FME is known for its ability to manipulate and transform geospatial data, connecting diverse data sources into efficient and automated workflows. By integrating FME with Machine Learning techniques, it is possible to transform raw data into valuable insights faster and more accurately, enabling intelligent analysis and data-driven decision making.
“Key Requirements to Successfully Implement Generative AI in Edge Devices—Opt...
“Key Requirements to Successfully Implement Generative AI in Edge Devices—Opt...Edge AI and Vision Alliance For the full video of this presentation, please visit: https://www.edge-ai-vision.com/2025/06/key-requirements-to-successfully-implement-generative-ai-in-edge-devices-optimized-mapping-to-the-enhanced-npx6-neural-processing-unit-ip-a-presentation-from-synopsys/
Gordon Cooper, Principal Product Manager at Synopsys, presents the “Key Requirements to Successfully Implement Generative AI in Edge Devices—Optimized Mapping to the Enhanced NPX6 Neural Processing Unit IP” tutorial at the May 2025 Embedded Vision Summit.
In this talk, Cooper discusses emerging trends in generative AI for edge devices and the key role of transformer-based neural networks. He reviews the distinct attributes of transformers, their advantages over conventional convolutional neural networks and how they enable generative AI.
Cooper then covers key requirements that must be met for neural processing units (NPU) to support transformers and generative AI in edge device applications. He uses transformer-based generative AI examples to illustrate the efficient mapping of these workloads onto the enhanced Synopsys ARC NPX NPU IP family.
“Key Requirements to Successfully Implement Generative AI in Edge Devices—Opt...
“Key Requirements to Successfully Implement Generative AI in Edge Devices—Opt...Edge AI and Vision Alliance
AngularJS Beginners Workshop
- 2. History • Origins within Google, invented by Misko Hevery • Open-sourced 2009 • 17,000 lines in 6 months => 1,500 in 3 weeks
- 3. Killer Features • • • • Two-way binding Declarative coding for UI Teaching HTML new tricks Separation of model & view, No DOM/View manipulation, less code • Great for CRUD based single page apps • Awesome adoption and great community • Unit testable, E2E testable
- 4. Main site, Download • angularjs.org
- 5. Ex 1: ng-app, expression binding • Download https://github.com/sathishvj/AngularJSTutoria ls/archive/master.zip • Extract locally • Go to 01-ngApp-binding • Open html in browser • Examine source code
- 6. Ex 1: ng-app, expression binding
- 7. Ex 1: ng-app, expression binding • Include angular.js or angular.min.js • Add ng-app declarative where you want Angular to manage app (typically <html> or <body>) • Expression binding with {{ }} • ng-app can also be written as ngApp • Use camel case in JavaScript code (ngApp) and use snake case in html (ng-app)
- 8. How does it work • Compile: traverse the DOM and collect all of the directives. The result is a linking function. • Link: combine the directives with a scope and produce a live view.
- 9. Ex 2: ngModel, binding variables • 02-ngModel • ng-model binds variable data. It can be declared on input, select, textarea, etc.
- 11. Other in-built declarations in Angular ngApp ngBind ngBindHtml ngBindTemplate ngBlur ngChange ngChecked ngClass ngClassEven ngClassOdd ngClick ngCloak ngController ngCopy ngCsp ngCut ngDblclick ngDisabled ngFocus ngForm ngHide ngHref ngIf ngInclude ngInit ngKeydown ngKeypress ngKeyup ngList ngModel ngMousedown ngMouseenter ngMouseleave ngMousemove ngMouseover ngMouseup ngNonBindable ngOpen ngPaste ngPluralize ngReadonly ngRepeat ngSelected ngShow ngSrc ngSrcset ngStyle ngSubmit ngSwitch ngTransclude ngValue
- 12. Ex 3: jquery comparison • 03-jquerycomparison
- 13. Differences from jQuery • Declarative code, not imperative (explicitly stating, say with functions, what action needs to be performed) • Automatic data binding • No direct DOM manipulation
- 14. Ex 04: More expressions
- 15. Expressions • Expressions can be embedded anywhere • … even for class values • There are special filters that you can use (currency) • Values are automatically bound
- 16. MVC
- 17. Ex 05: Scope and Controller
- 18. Learnings • Controller objects can separate data and functionality – There can be many controllers • ‘$scope’ is injected by AngularJS • $scope.data in the controller is referred to as simply data in html • Dot notation for object members works (person.age) – In fact, this is suggested practice
- 20. How AngularJS does MVC
- 23. Ex 07: Method on Scope
- 24. Ex 08: ngClick
- 25. Ex 09: ngRepeat
- 26. Ex 09: ngRepeat
- 27. Ex 10: Filters
- 29. Modules in AngularJS • Third party code can be packaged as reusable modules. • The modules can be loaded in any/parallel order (due to delayed nature of module execution). • Some Angular modules are in separate files: Eg. ngRoute is in angularjs-route.min.js
- 30. Ex 11: ngView and Routing
- 31. ngView and Routing • This part requires a web server – I’ve created a simple one at https://github.com/sathishvj/gowebserver – Run suitable executable in index.html directory • You can load different views contained in partial html files based on address bar location and apply specific controllers to it
- 32. Ex 12: $http
- 33. $http • Make AJAX calls with $http • It returns deferred promises – More in later workshops • You can handle ‘success’ and ‘error’
- 34. Working with angular-seed • https://github.com/angular/angular-seed • You need to have node.js installed to test
- 35. Ex 13: Custom Filter
- 36. Ex 14: Custom Directive • -customdirective
- 37. What we didn’t cover • • • • • Unit testing, E2E testing Custom directives beyond basics $apply and digest cycles $q and promises Service, Factory, Provider
- 38. Resources • • • • • • angularjs.org Google Groups: AngularJS Google+: AngularJS ngmodules.org Github: angular-ui.github.io Google+: AngularJS India
- 39. Project • Build an app to list tweets given a search string (might require sign-up to Twitter API) • Two pages required – main and an about page
Editor's Notes
- #3: they start with an anecdote, discussing how they were working on a web application at Google. They have already written 17000 lines of code in about 6 months and it was almost finished, albeit with great frustration related to development speed and testability. This guy, MiškoHevery, tells everyone that by using a framework that he wrote in his spare time (you gotta love devs!) they could rewrite the whole application in two weeks. He was wrong, they did it in three weeks and at the end the whole thing has only 1500 lines of code and was fully testable. 90% less code, in 90% less time. And it was very testable.
- #9: CompilerCompiler is an angular service which traverses the DOM looking for attributes. The compilation process happens into two phases.Compile: traverse the DOM and collect all of the directives. The result is a linking function.Link: combine the directives with a scope and produce a live view. Any changes in the scope model are reflected in the view, and any user interactions with the view are reflected in the scope model. Making the scope model a single source of truth.Some directives such ng-repeat clone DOM elements once for each item in collection. Having a compile and link phase improves performance since the cloned template only needs to be compiled once, and then linked once for each clone instance.
- #22: http://slid.es/neenhouse/dependency-injection-in-angularjs
- #23: http://slid.es/neenhouse/dependency-injection-in-angularjs