Angularjs beginners-workshop1

0 likes219 views

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.

History
• Origins within Google, devloped by Misko
Hevery and team
• 17,000 lines in 6 months => 1,500 in 3 weeks

Killer Features
• Two-way binding
• Organise your js
• Declarative coding for UI
• Teaching HTML new tricks – new extention for html
• Separation of model & view, No DOM/View
manipulation, less code
• Great for single page apps
• Awesome adoption and great community
• Unit testable, E2E testable
• Angular play well with jq

First Line of Code with Anularjs
Bootstrap for css
Angular.js

What is Module?
1. A module is a collection of services, directives, filters, and configuration
information.
2. Make our code more maintainable, readable and testable
3. Where we define dependencies for our app, Module can use other module
4. Third party code can be packaged as reusable modules.
5. The modules can be loaded in any/parallel order (due to delayed nature of
module execution).
6. Some Angular modules are in separate files: Eg. ngRoute is in angularjs-route.
min.js
M
M M
M

First Line of Code with Anularjs
M
Angularjs
Dependencies
Module Name

Other in-built declarations in Angular
Ng-App ng-Bind ng-BindHtml ng-BindTemplate ng-
Blur ng-Change ng-Checked ng-Class ng-ClassEven
ng-ClassOdd ng-Click ng-Cloak ng-Controller ng-
Copy ng-Csp ngCut ngDblclick ngDisabled ngFocus
ngForm ng-Hide ng-Href ng-If ngI-nclude ng-Init ng-
Keydown ng-Keypress ng-Keyup ng-List ng-Model
ng-Mousedown ng-Mouseenter ng-Mouseleave ng-
Mousemove ng-Mouseover ng-Mouseup ng-
NonBindable ng-Open ng-Paste ng-Pluralize ng-
Readonly ng-Repeat ng-Selected ng-Show ngSrc ng-
Srcset ng-Style ng-Submit ng-Switch ng-Transclude
ng-Value

Adding Directive in html
M
D Run this module when the page load.
Angularjs
Dependencies
Module Name

Expressions
• Expressions can be embedded anywhere
• … even for class values
• There are special filters that you can use
(currency)
• Values are automatically bound

Expressions
E We are of expression of our application.
Allow you to add dynamic value to your html.
Angular expressions are like JavaScript expressions with the following differences:
Numeric Operation
String Opration
More Example: https://docs.angularjs.org/guide/expression
But for example url
We are of expression of our application.
But for example url

Learning
• So far you learn basics of
M D E
Do your self
Objectives:
• Create a Module named firstApp so we can get started on this
marketing journey.
• Include firstApp in html
• Write down hello world in expression in H1 element

Controllers
C
• Controllers where we define our app behavior by defining functions and value.
Wrapping your code in closure is good habit
C
Notice that Controller must be attached(
inside)your app
Name of Controller
Property of Controller
Simple JavaScript Object.

Attaching Controller
Used Emmet sublime
packaged controller – it’s a
good habbit to write html is
less time
+ TAB
Directive Controller name Alias
Expressions

Make life easy with ng-reapet
Directive
Ng-repeat alias

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

Resources
• angularjs.org
• Google Groups: AngularJS
• Google+: AngularJS
• ngmodules.org
• Github: angular-ui.github.io
• Google+: AngularJS India

This document outlines best practices for AngularJS development in enterprise environments, particularly for distributed teams. It emphasizes the importance of planning, documentation, coding standards, testing, and continuous integration, providing specific tools and methodologies for each aspect. Key recommendations include using style guides, automating code quality checks, and maintaining effective team communication to enhance code maintainability and project success.

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.

Introduction to Angular 2Tuan Trung Vo

The document presents an overview of AngularJS 2, focusing on its features as a JavaScript framework for building single-page applications (SPAs). It highlights the shift from Angular 1 to Angular 2, emphasizing performance improvements, a component-based architecture, and the adoption of modern programming practices with TypeScript. Additionally, it includes a demo link and outlines the basics of Angular components and their structure.

Modules in AngularJsK Arunkumar

Modules are containers that define an AngularJS application and hold parts like controllers, services, and directives. A module is used as the main entry point and starting point of an app. Controllers must belong to a module to avoid issues like global overriding. To create a module, use the angular.module method, passing in a name and empty array. Controllers can then be added to the module using the module's controller method.

Angular 4 and TypeScriptAhmed El-Kady

The document serves as an introduction to Angular 4 and TypeScript, covering concepts such as TypeScript's features, Angular architecture, and application setup. It details the installation process, Angular CLI usage, and key components like modules, templates, metadata, and data binding. Additionally, it describes the importance of services for data management and separation of concerns within an Angular application.

Angular 2 overviewJesse Warden

Introduction to SPA with AngularJSRiki Pribadi

This document provides an introduction and overview of single page applications (SPAs) using AngularJS as an example framework. It discusses what SPAs are and why they are used, including how they allow a more native-like user experience. It then walks through setting up a sample SPA project for managing todo lists and categories using AngularJS, including creating routes, controllers, services and templates to support basic CRUD operations. The goal is to help understand the key concepts and setup needed to build a basic SPA.

Angular JsKnoldus Inc.

The document provides an overview of AngularJS, a JavaScript framework by Google for building single-page applications (SPAs) that focuses on dynamic web development with features like data binding and templating. It explains the framework's benefits, including simplifying development and enhancing testability, while clarifying what AngularJS is not, such as a JavaScript library or plugin. Additionally, it discusses key concepts like directives, factories, and the general structure for setting up an AngularJS application.

Angularjs interview questions and answersAnil Singh

This document discusses AngularJS interview questions and answers. It begins by defining AngularJS as a JavaScript framework maintained by Google for building single-page applications using MVC or MV* patterns. It then lists the main features of AngularJS such as two-way data binding, templates, directives, dependency injection and more. The document continues by providing sample questions that may be asked during an AngularJS interview and suggested answers covering topics like directives, scopes, filters, routing and other aspects of the framework.

Ng talkAymene Bennour

The document provides an introduction to Angular, a JavaScript framework used for building interactive single-page applications (SPAs). It highlights the benefits of using a framework, such as maintaining clean code and scalability, and introduces the Angular CLI for efficient project setup and management. Additionally, it covers fundamental concepts like components, template binding, built-in directives, and pipes in Angular.

Angular.js - JS Camp UKraine 2013Max Klymyshyn

This document provides an overview of the AngularJS JavaScript framework. It discusses what AngularJS is, how it works, and its benefits. AngularJS is an MVC framework built by Google for building user interfaces with declarative programming and two-way data binding. It allows creating reusable components with directives and provides services for common tasks like data binding, dependency injection and RESTful APIs. The document highlights how AngularJS enables rapid prototyping, has a large community and structured codebase which can help startups build fast prototypes and robust solutions.

Angularjs - custom directives part 05Mohd Abdul Baquee

Developing a Demo Application with Angular 4 - J2INader Debbabi

The document outlines a training session on developing a demo application using the Angular framework organized by the Club Jeunes Ingénieurs ISAMM. It covers topics such as creating a simple management application for a language institute, setting up a fake REST API with json-server, using Angular Material for UI components, Angular Router for navigation, and an introduction to RxJS for handling asynchronous data. The document provides setup instructions and examples for each of these components.

AngularJS introductionTania Gonzales

The document serves as an introduction to AngularJS, outlining its purpose as a structural framework for dynamic web applications and highlighting when to use it. It emphasizes best practices, such as keeping controllers and services independent of the DOM and maintaining readable scope, while also providing resources for further learning. Additionally, it discusses Angular's features like two-way data binding, dependency injection, and its MVC architecture.

Tech Webinar: Angular 2, Introduction to a new frameworkCodemotion

The document provides an overview of the core concepts of Angular 2, highlighting significant changes from Angular 1.x, such as the elimination of $scope and controllers, introduction of component-based UI, one-way data flow, and improved performance. It details features like dependency injection, component lifecycle hooks, and change detection strategies for optimizing performance in applications. Additionally, it discusses various Angular functionalities, including template binding, event handling, and the role of Zone.js in managing asynchronous operations.

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.

AngularJS 2.0Boyan Mihaylov

Design p atternsAmr Abd El Latief

This document discusses design patterns and principles. It begins by defining design patterns as repeatable solutions to common design problems. It then covers several design patterns including Singleton, Strategy, Adapter, Template, Factory, Abstract Factory, and Observer patterns. It also discusses low-level principles like Tell Don't Ask and high-level principles like the Single Responsibility Principle. Finally, it provides examples of how to implement some of the patterns and principles in code.

Angular1x and Angular 2 for BeginnersOswald Campesato

AngularJS interview questionsUri Lukach

The document summarizes two AngularJS interview questions and their potential answers. The first question asks what would be displayed on an index.html page with code that filters a greeting. The answer is it would display "Good Evening, World!" based on the code provided. The second question describes an error encountered with an SVG circle attribute binding and asks how to solve it. Potential solutions provided are using ng-attr-r instead of r, or creating a custom directive.

AngularJs advanced TopicsAmr Abd El Latief

Introduction to railsChamnap Chhorn

Rails is a web application framework that uses conventions over configurations and don't repeat yourself principles. It follows the model-view-controller architectural pattern. ActiveRecord is Rails' object-relational mapper that allows for easy database interactions by mapping database tables to model classes. ActionController handles routing and controlling responses, while ActionView handles views and rendering. The presentation demonstrates building a basic Rails application and covers its core components like ActiveRecord, controllers, and views.

Get satrted angular jsAlexandre Marreiros

This document outlines an agenda for a workshop on getting started with Angular. The agenda includes discussing the state of web development, an introduction to Angular, building Angular applications using fundamental blocks like expressions, directives, and scopes. It also covers controllers, modules, directives, views, services, routing, and communication with events. The workshop aims to help participants learn Angular fundamentals through examples, exercises and addressing common issues.

AngularJSHiten Pratap Singh

The document outlines an agenda for a presentation on AngularJS that covers: 1. An introduction to AngularJS and its core features like two-way data binding, templates, and MVC architecture. 2. Explanations and examples of key AngularJS concepts like directives, expressions, forms, services, modules, routing, and scopes. 3. Discussions of AngularJS advantages like fast development and scalability, and disadvantages like complexity. 4. References for further learning and a question/answer session.

Angular EE - Special Workshop by Nir KaufmanNir Kaufman

The document discusses Angular enterprise edition, focusing on its structure, including modules like core, shared, and feature modules, which facilitate code sharing and application architecture. It also highlights the roles, dependencies, and exports of these modules, along with the concept of configurable modules and state management using ngrx. Additionally, it touches upon mono repo solutions for large-scale applications to enhance code sharing and reuse.

Introduction to Angular 2Knoldus Inc.

The document provides an introduction to Angular 2, highlighting its improvements over Angular 1.x, such as better performance, mobile readiness, and a new directive strategy. It discusses key features, the transition path from Angular 1 to Angular 2, and provides technical details on directives, dependency injection, and data binding. Finally, it underscores Angular 2's alignment with modern web standards, including web components.

Beyond AngularJS: Best practices and moreAri Lerner

The document discusses AngularJS, highlighting its features as a powerful front-end framework supported by Google, focusing on best practices for development and maintainability. It emphasizes the importance of modularizing code, using tools like Browserify and Gulp, and implementing testing strategies to ensure code quality. The author, Ari Lerner, also shares resources for further learning and engagement within the Angular community.

AngularJS Beginners WorkshopSathish VJ

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.

One Weekend With AngularJSYashobanta Bai

This document provides an overview of AngularJS, including what it is, its core components (model, view, controller), how to get started, common directives, and examples of using directives, filters, controllers and modules. It explains key AngularJS concepts like data binding, scopes, and how AngularJS interacts with the browser to update views dynamically. Examples are provided for common tasks like iterating with ng-repeat, filtering data, and handling events.

More Related Content

What's hot (20)

Angular JsKnoldus Inc.

Angularjs interview questions and answersAnil Singh

Ng talkAymene Bennour

Angular.js - JS Camp UKraine 2013Max Klymyshyn

Angularjs - custom directives part 05Mohd Abdul Baquee

Developing a Demo Application with Angular 4 - J2INader Debbabi

AngularJS introductionTania Gonzales

Tech Webinar: Angular 2, Introduction to a new frameworkCodemotion

AngularJS best-practicesHenry Tao

AngularJS 2.0Boyan Mihaylov

Design p atternsAmr Abd El Latief

Angular1x and Angular 2 for BeginnersOswald Campesato

AngularJS interview questionsUri Lukach

AngularJs advanced TopicsAmr Abd El Latief

Introduction to railsChamnap Chhorn

Get satrted angular jsAlexandre Marreiros

AngularJSHiten Pratap Singh

Angular EE - Special Workshop by Nir KaufmanNir Kaufman

Introduction to Angular 2Knoldus Inc.

Beyond AngularJS: Best practices and moreAri Lerner

Angular JsKnoldus Inc.

Angularjs interview questions and answersAnil Singh

Ng talkAymene Bennour

Angular.js - JS Camp UKraine 2013Max Klymyshyn

Angularjs - custom directives part 05Mohd Abdul Baquee

Developing a Demo Application with Angular 4 - J2INader Debbabi

AngularJS introductionTania Gonzales

Tech Webinar: Angular 2, Introduction to a new frameworkCodemotion

AngularJS best-practicesHenry Tao

AngularJS 2.0Boyan Mihaylov

Design p atternsAmr Abd El Latief

Angular1x and Angular 2 for BeginnersOswald Campesato

AngularJS interview questionsUri Lukach

AngularJs advanced TopicsAmr Abd El Latief

Introduction to railsChamnap Chhorn

Get satrted angular jsAlexandre Marreiros

AngularJSHiten Pratap Singh

Angular EE - Special Workshop by Nir KaufmanNir Kaufman

Introduction to Angular 2Knoldus Inc.

Beyond AngularJS: Best practices and moreAri Lerner

Similar to Angularjs beginners-workshop1 (20)

AngularJS Beginners WorkshopSathish VJ

One Weekend With AngularJSYashobanta Bai

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.

Kalp Corporate Angular Js TutorialsKalp Corporate

AngularJS is an open-source web application framework initially developed by Google that allows the creation of rich internet applications using a clean MVC (Model View Controller) architecture. It features data binding, dependency injection, and a modular approach, providing developers with tools to build single-page applications efficiently. Despite its advantages, AngularJS comes with security concerns and dependency on JavaScript for functionality.

AngularJSSrivatsan Krishnamachari

The document provides an agenda and overview of key concepts in AngularJS including single page applications, directives, data binding, MVC pattern, modules, routes, factories and services. It discusses downloading and setting up AngularJS, its building blocks like views, controllers and models. It also provides examples of using directives for data binding, iteration, conditional display, and creating custom directives.

AngularJsAbdhesh Kumar

This document provides an overview of AngularJS, including what it is, its key features, how it works, common terminology, directives, and how to get started using it with Yeoman. AngularJS is an open-source JavaScript framework maintained by Google that assists with building single-page applications using MVC architecture. It features two-way data binding, templates, dependency injection and directives to help organize applications. The document outlines steps for setting up a development environment with Yeoman, creating a sample app, and basic tasks like running and building the app.

Angularjs 131211063348-phpapp01Arunangsu Sahu

This document provides an overview of AngularJS, including what it is, its key features and terminology, how it works, directives, and how to get started using Yeoman to build an AngularJS application. AngularJS is an open-source JavaScript framework that assists with building single-page applications using MVC architecture. It features two-way data binding, templates, dependency injection and directives to help organize applications. Yeoman provides tools like Yo, Grunt and Bower to help set up AngularJS development environments and build projects.

AngularJS training - Day 1 - Basics: Why, What and basic features of AngularJSmurtazahaveliwala

The document provides a comprehensive introduction to AngularJS, a client-side JavaScript framework designed for building modern single-page applications (SPAs) with a focus on flexibility, modularity, and testability. It outlines key features of AngularJS, such as data-binding, directives, and routing, while also explaining its architecture and components like controllers and services. Additionally, it includes guidance on setting up an AngularJS application and utilizing tools for development.

Getting Started With AngularJSEdureka!

The document provides an overview of AngularJS, including its features, architecture, and the advantages it offers for web application development. It outlines topics such as directives, filters, single-page applications (SPAs), and steps to create an AngularJS application. Additionally, the document includes information about big brands using AngularJS and details about Edureka's AngularJS course offerings.

AngularJS for BeginnersEdureka!

The document provides an overview of AngularJS and how to build single page applications with it. It discusses key AngularJS concepts like directives, filters, data binding and MVC architecture. It also presents steps to create a basic AngularJS application and build a responsive user management application as a project example. The document promotes an AngularJS course by Edureka that teaches these concepts over 21 hours of live online classes along with assignments and a project.

Angular jsKnoldus Inc.

AngularJS is an open-source JavaScript framework developed by Google for building single-page applications, enhancing browser-based applications with MVC architecture. Key features include two-way data binding, deep linking, and a rich set of directives, which make it easier to create dynamic user interfaces. The document outlines how to set up an AngularJS application, use its core capabilities, and manage dependencies and project structure with tools like Yeoman, Grunt, and Bower.

Getting Started with AngularJSEdureka!

The document outlines an AngularJS course offered by Edureka, which introduces essential concepts, features, and architecture of AngularJS. It covers topics such as DOM manipulation, directives, filters, single-page applications (SPAs), and provides practical steps to build applications. The course aims to enhance web development skills, particularly in developing rich user interfaces using AngularJS.

ME vs WEB - AngularJS FundamentalsAviran Cohen

The document provides a comprehensive overview of AngularJS, highlighting its significance in modern web development as a powerful front-end JavaScript framework that enhances HTML to create complex applications. It discusses the evolution of web development tools, the architecture of AngularJS including its component-based structure, and introduces key features like two-way data binding, directives, and modules. Additionally, the document gives practical guidance on getting started with AngularJS and explains the role of directives and the HTML compiler in enhancing web applications.

Learning AngularJS - Complete coverage of AngularJS features and conceptsSuresh Patidar

The document outlines a 6-day training program for learning AngularJS, covering fundamental concepts such as MVC architecture, single page applications, directives, services, and dependency injection. It includes practical examples of AngularJS features and components, as well as the creation of directives and services. The training also emphasizes internationalization, localization, and the proper use of AngularJS's built-in functionalities.

Angular JS training institute in JaipurHEMANT SAXENA

The document provides an overview of AngularJS, a JavaScript-based front-end framework primarily used for building single-page applications. Key features include dependency injection, two-way data binding, and the use of directives to augment HTML behavior. It also discusses the framework's architecture, form validation, AJAX requests, and the role of animations, highlighting its capability to create dynamic and user-friendly web applications.

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.

Introduction to Angularjs : kishan kumarAppfinz Technologies

AngularJS is a JavaScript MVC framework developed by Google to facilitate building maintainable web applications, focusing on enhancing HTML through the use of directives and improving the architecture of web apps. It promotes best practices like Test-Driven Development (TDD) and supports single-page applications with features such as two-way data binding, dependency injection, and routing. The framework emphasizes a declarative programming style over imperative coding and provides a refined way to manage application functionality through its component-based architecture.

AngularJS Beginner Day OneTroy Miles

Gettings started with the superheroic JavaScript library AngularJSArmin Vieweg

The document is a workshop guide by Armin Rüdiger Vieweg on getting started with AngularJS, covering its features, setup, and key concepts like directives, two-way data binding, and dependency injection. It outlines the prerequisites for AngularJS development, such as creating a clean folder structure and using basic HTML templates. The guide also provides practical examples of using AngularJS directives and controllers to build dynamic web applications.

AngularJS By VipinVipin Mundayad

The document provides a comprehensive overview of AngularJS, a powerful JavaScript framework used for building dynamic web applications. It outlines its core features, such as data-binding, MVC architecture, and integration with HTML, as well as the advantages and disadvantages of using AngularJS. Additionally, it details how to set up an AngularJS application, utilize directives, controllers, and services, and demonstrates examples of creating an AngularJS application.

AngularJS Beginners WorkshopSathish VJ

One Weekend With AngularJSYashobanta Bai

Angular js for BeginnnersSantosh Kumar Kar

Kalp Corporate Angular Js TutorialsKalp Corporate

AngularJSSrivatsan Krishnamachari

AngularJsAbdhesh Kumar

Angularjs 131211063348-phpapp01Arunangsu Sahu

AngularJS training - Day 1 - Basics: Why, What and basic features of AngularJSmurtazahaveliwala

Getting Started With AngularJSEdureka!

AngularJS for BeginnersEdureka!

Angular jsKnoldus Inc.

Getting Started with AngularJSEdureka!

ME vs WEB - AngularJS FundamentalsAviran Cohen

Learning AngularJS - Complete coverage of AngularJS features and conceptsSuresh Patidar

Angular JS training institute in JaipurHEMANT SAXENA

Introduction to AngularjsManish Shekhawat

Introduction to Angularjs : kishan kumarAppfinz Technologies

AngularJS Beginner Day OneTroy Miles

Gettings started with the superheroic JavaScript library AngularJSArmin Vieweg

AngularJS By VipinVipin Mundayad

Angularjs beginners-workshop1

1. Beginner’s Workshop Jugnu Sharma SAL1

2. History • Origins within Google, devloped by Misko Hevery and team • 17,000 lines in 6 months => 1,500 in 3 weeks

3. Killer Features • Two-way binding • Organise your js • Declarative coding for UI • Teaching HTML new tricks – new extention for html • Separation of model & view, No DOM/View manipulation, less code • Great for single page apps • Awesome adoption and great community • Unit testable, E2E testable • Angular play well with jq

5. Angular Site • angularjs.org

6. First Line of Code with Anularjs Bootstrap for css Angular.js

7. What is Module? 1. A module is a collection of services, directives, filters, and configuration information. 2. Make our code more maintainable, readable and testable 3. Where we define dependencies for our app, Module can use other module 4. Third party code can be packaged as reusable modules. 5. The modules can be loaded in any/parallel order (due to delayed nature of module execution). 6. Some Angular modules are in separate files: Eg. ngRoute is in angularjs-route. min.js M M M M

8. First Line of Code with Anularjs M Angularjs Dependencies Module Name

9. Other in-built declarations in Angular Ng-App ng-Bind ng-BindHtml ng-BindTemplate ng- Blur ng-Change ng-Checked ng-Class ng-ClassEven ng-ClassOdd ng-Click ng-Cloak ng-Controller ng- Copy ng-Csp ngCut ngDblclick ngDisabled ngFocus ngForm ng-Hide ng-Href ng-If ngI-nclude ng-Init ng- Keydown ng-Keypress ng-Keyup ng-List ng-Model ng-Mousedown ng-Mouseenter ng-Mouseleave ng- Mousemove ng-Mouseover ng-Mouseup ng- NonBindable ng-Open ng-Paste ng-Pluralize ng- Readonly ng-Repeat ng-Selected ng-Show ngSrc ng- Srcset ng-Style ng-Submit ng-Switch ng-Transclude ng-Value

10. Adding Directive in html M D Run this module when the page load. Angularjs Dependencies Module Name

11. Expressions • Expressions can be embedded anywhere • … even for class values • There are special filters that you can use (currency) • Values are automatically bound

12. Expressions E We are of expression of our application. Allow you to add dynamic value to your html. Angular expressions are like JavaScript expressions with the following differences: Numeric Operation String Opration More Example: https://docs.angularjs.org/guide/expression But for example url We are of expression of our application. But for example url

13. Ex 04: More expressions

14. Learning • So far you learn basics of M D E Do your self Objectives: • Create a Module named firstApp so we can get started on this marketing journey. • Include firstApp in html • Write down hello world in expression in H1 element

15. Controllers C • Controllers where we define our app behavior by defining functions and value. Wrapping your code in closure is good habit C Notice that Controller must be attached( inside)your app Name of Controller Property of Controller Simple JavaScript Object.

16. Attaching Controller Used Emmet sublime packaged controller – it’s a good habbit to write html is less time + TAB Directive Controller name Alias Expressions

17. Make life easy with ng-reapet Directive Ng-repeat alias

18. 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

19. Resources • angularjs.org • Google Groups: AngularJS • Google+: AngularJS • ngmodules.org • Github: angular-ui.github.io • Google+: AngularJS India

21. The END

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ško Hevery, 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.
#11: module not doing anything yet, but just by including it, its going to treat this html inside this element as a part of angular app. and this mean we can start writing expression,
#16: Now we will see how to get access this data in our html.
#17: To insert data in your page with controller, first need to add ng-controller directive in html, this allow us to attache our controller to this element, the value of controller is name of controller, and we use as store is alias, which we will use in our expresstion

Angularjs beginners-workshop1

Recommended

More Related Content

What's hot (20)

Similar to Angularjs beginners-workshop1 (20)

Angularjs beginners-workshop1

Editor's Notes