Scribd
Upload
3 views14 pages

Angular Js Note

This document provides an introduction to AngularJS, a JavaScript framework for building dynamic single-page applications, detailing its architecture, components, and setup instructions. It emphasizes the importance of AngularJS in understanding modern frameworks and includes practical examples of directives, controllers, services, and routing. The document also outlines best practices, debugging tips, and a lab assignment for creating a student management application.

Uploaded by

Taiwo Ayomide
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
3 views14 pages

Angular Js Note

This document provides an introduction to AngularJS, a JavaScript framework for building dynamic single-page applications, detailing its architecture, components, and setup instructions. It emphasizes the importance of AngularJS in understanding modern frameworks and includes practical examples of directives, controllers, services, and routing. The document also outlines best practices, debugging tips, and a lab assignment for creating a student management application.

Uploaded by

Taiwo Ayomide
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 14

AngularJS: Introduction and Fundamentals

200-Level Course Material

Slide 1: What is AngularJS?

• JavaScript framework developed and maintained by Google

• Designed for building dynamic single-page applications (SPAs)

• Released in 2010, preceded Angular 2+ (different framework)

• Uses MVC (Model-View-Controller) or MVVM (Model-View-ViewModel) architecture

• Extends HTML with custom attributes called directives

Slide 2: Why Learn AngularJS?

• Still used in legacy applications

• Teaches important SPA concepts

• Two-way data binding simplifies development

• Dependency injection makes code modular and testable

• Strong community and documentation

• Foundation for understanding modern Angular (2+)

Slide 3: AngularJS Architecture

• Modules: Containers for application parts

• Controllers: JavaScript functions that maintain application data and behavior

• Services: Reusable business logic independent of views

• Directives: Extend HTML with custom attributes and elements

• Filters: Format data for display to the user

• Two-way data binding: Synchronizes data between model and view


Slide 4: Setting Up AngularJS (CDN)

<!DOCTYPE html>

<html ng-app>

<head>

<title>My First AngularJS App</title>

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

</head>

<body>

<!-- Simple two-way data binding example -->

<input type="text" ng-model="name">

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

</body>

</html>

Slide 5: Setting Up AngularJS Locally

Step 1: Download AngularJS

• Visit https://angularjs.org/ and click "Download"

• Choose the latest stable 1.8.x version (currently 1.8.2)

• Download the "Minified" version (angular.min.js)

• Optionally download additional modules (angular-route.min.js, etc.)

Step 2: Create Project Structure

my-angular-app/

├── lib/

│ └── angular.min.js

├── app/

│ ├── app.js
│ ├── controllers/

│ ├── services/

│ └── directives/

├── views/

└── index.html

Step 3: Create HTML File with Local Reference

<!DOCTYPE html>

<html ng-app>

<head>

<title>My Local AngularJS App</title>

<!-- Reference local AngularJS file -->

<script src="lib/angular.min.js"></script>

</head>

<body>

<!-- Simple two-way data binding example -->

<input type="text" ng-model="name">

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

</body>

</html>

Step 4: For More Complex Apps (Optional)

// app/app.js

var app = angular.module('myApp', []);

// Add controllers, services, etc. as needed

Step 5: Run Locally

• Use a local web server (not just opening the file directly)
• Options:

o Python: python -m http.server (Python 3) or python -m SimpleHTTPServer


(Python 2)

o Node.js: npx http-server

o VS Code: Live Server extension

o Any other web server software

Slide 6: Directives

• ng-app: Initializes an AngularJS application

• ng-controller: Attaches a controller to the view

• ng-model: Binds input elements to application data

• ng-repeat: Repeats an HTML element for each item in a collection

• ng-click: Specifies custom behavior when an element is clicked

• ng-show/ng-hide: Conditionally shows or hides content

• ng-if: Conditionally includes/removes content from DOM

Slide 7: Expressions and Data Binding

• Expressions: JavaScript-like code snippets inside {{ }}

• Simple evaluation: {{ 5 + 5 }}

• Variable binding: {{ user.name }}

• Two-way Data Binding Example:

<div ng-controller="UserController">

<input type="text" ng-model="user.name">

<p>Hello, {{ user.name }}!</p>

</div>
Slide 8: Controllers

• JavaScript functions that control data for a view

• Attached to HTML using ng-controller directive

• $scope is the "glue" between controller and view

app.controller('StudentController', function($scope) {

$scope.students = [

{name: 'Alice', grade: 90},

{name: 'Bob', grade: 85},

{name: 'Charlie', grade: 78}

];

$scope.addStudent = function() {

$scope.students.push({

name: $scope.newName,

grade: $scope.newGrade

});

$scope.newName = '';

$scope.newGrade = '';

};

});

Slide 9: Modules

• Containers for different parts of your application

• Help maintain clean code organization

• Can be reused across applications

// Define a module
var app = angular.module('myApp', ['ngRoute']);

// Configure the module

app.config(function($routeProvider) {

// Module configuration

});

// Use the module

app.controller('MyController', function() {

// Controller logic

});

Slide 10: Services

• Singleton objects for application-wide functionality

• Used for sharing data and functions across controllers

• Built-in services start with $ (like $http, $timeout)

• Custom services create reusable code

app.service('StudentService', function($http) {

this.getAllStudents = function() {

return $http.get('/api/students');

};

this.addStudent = function(student) {

return $http.post('/api/students', student);

};

});
Slide 11: Using Services in Controllers

app.controller('StudentCtrl', function($scope, StudentService) {

// Load students

StudentService.getAllStudents()

.then(function(response) {

$scope.students = response.data;

})

.catch(function(error) {

$scope.error = 'Failed to load students';

});

// Add a student

$scope.addStudent = function() {

var newStudent = {

name: $scope.newName,

grade: $scope.newGrade

};

StudentService.addStudent(newStudent)

.then(function(response) {

$scope.students.push(response.data);

$scope.newName = '';

$scope.newGrade = '';

});
};

});

Slide 12: Filters

• Transform data for display without changing the original

• Can be used in expressions, directives, or controllers

• Built-in filters: currency, date, uppercase, lowercase, number, orderBy, filter

<div ng-controller="ProductCtrl">

<p>{{ product.price | currency }}</p>

<p>{{ product.name | uppercase }}</p>

<p>{{ product.created | date:'shortDate' }}</p>

<ul>

<li ng-repeat="item in items | orderBy:'name' | filter:searchText">

{{ item.name }}

</li>

</ul>

</div>

Slide 13: Custom Filters

app.filter('capitalize', function() {

return function(input) {

if (!input) return '';

return input.charAt(0).toUpperCase() + input.slice(1).toLowerCase();

};

});
<div ng-controller="NameCtrl">

<p>{{ username | capitalize }}</p>

</div>

Slide 14: Routing

• Navigate between views within a single page

• Requires the ngRoute module

app.config(function($routeProvider) {

$routeProvider

.when('/', {

templateUrl: 'views/home.html',

controller: 'HomeCtrl'

})

.when('/students', {

templateUrl: 'views/students.html',

controller: 'StudentCtrl'

})

.when('/courses', {

templateUrl: 'views/courses.html',

controller: 'CourseCtrl'

})

.otherwise({

redirectTo: '/'

});

});
Slide 15: Forms and Validation

<form name="userForm" ng-submit="submitForm()" novalidate>

<div>

<label>Name:</label>

<input type="text" name="name" ng-model="user.name" required>

<span ng-show="userForm.name.$error.required && userForm.name.$touched">

Name is required

</span>

</div>

<div>

<label>Email:</label>

<input type="email" name="email" ng-model="user.email" required>

<span ng-show="userForm.email.$error.required && userForm.email.$touched">

Email is required

</span>

<span ng-show="userForm.email.$error.email && userForm.email.$touched">

Invalid email format

</span>

</div>

<button type="submit" ng-disabled="userForm.$invalid">Submit</button>

</form>

Slide 16: Custom Directives

app.directive('studentCard', function() {
return {

restrict: 'E', // Element directive

templateUrl: 'templates/student-card.html',

scope: { // Isolated scope

student: '=', // Two-way binding

onDelete: '&' // Function binding

},

controller: function($scope) {

$scope.incrementGrade = function() {

if ($scope.student.grade < 100) {

$scope.student.grade += 1;

};

};

});

<student-card

student="currentStudent"

on-delete="removeStudent(currentStudent)">

</student-card>

Slide 17: Dependency Injection

• AngularJS's way of providing components with their dependencies

• Makes testing easier

• Types of components that can be injected:

o Value
o Factory

o Service

o Provider

o Constant

// Defining a service

app.service('Logger', function() {

this.log = function(msg) {

console.log(msg);

};

});

// Injecting the service

app.controller('MainCtrl', function($scope, Logger) {

$scope.doSomething = function() {

Logger.log('Something happened!');

};

});

Slide 18: AngularJS vs Modern Frameworks

• Similarities

o Component-based architecture

o Data binding

o Dependency injection

o Routing

• Differences

o Angular (2+): TypeScript-based, more opinionated, better performance


o React: Virtual DOM, JSX, component-focused

o Vue: Progressive framework, easier learning curve

o Modern frameworks generally have better performance

Slide 19: Best Practices

• Keep controllers simple and focused

• Use services for business logic and data access

• Use directives for DOM manipulation

• Organize code by feature, not by type

• Maintain clean scopes, avoid $scope pollution

• Use ngAnnotate for minification safety

• Follow style guide (John Papa's Angular Style Guide)

Slide 20: Debugging Tips

• Use ng-inspector browser extension

• Angular Batarang Chrome extension

• console.log($scope) to inspect scope

• Minification issues: Always use the array notation for DI

• Watch for common errors:

o Forgetting to include ng-app

o Scope inheritance issues

o Missing dependencies

Slide 21: Lab Assignment

Build a Student Management Application

• Create an AngularJS application with:


o Student listing page with search and sort

o Student detail page

o Add/edit student form with validation

o Delete functionality with confirmation

Requirements:

1. Use at least 5 different directives

2. Implement at least 2 custom services

3. Create at least 1 custom filter

4. Implement routing with at least 3 views

5. Deploy to GitHub Pages

Slide 22: Additional Resources

• AngularJS Official Documentation

• AngularJS on GitHub

• W3Schools AngularJS Tutorial

• Codeschool's AngularJS Course

• John Papa's Style Guide

• AngularJS Patterns: Clean Code

You might also like