Archives

ng demo app – display list

Create a static web project
delete web content folder
create an index.html
create folder app->scripts, views and assets->JS

Advertisements

Demo on $scope

<html ng-app="myApp">

<head>
    <script src="angular.min.js"></script>
    <script>
        var productApp = angular.module("myApp", []);
        console.log("myApp called");
        productApp.controller("myController", function ($scope) {
            console.log("myController called");
            $scope.showProducts = function () {
                console.log("showProducts called");
                $scope.products = ["Samsung", "Apple"];
                console.log($scope.products);
            }
        });
    </script>
</head>

<body>
    <div ng-controller="myController">
        <a href="#" ng-click="showProducts()">Show Products</a> {{products}}
    </div>
</body>

</html>

First Controller

<html ng-app="myApp">

<head>
    <script src="angular.min.js"></script>
    <script>
        var myFirstApp = angular.module('myApp', []);
        myFirstApp.controller("FirstController", function () {
            console.log("FirstController Called");
        });
    </script>
</head>

<body>
    <div ng-controller="FirstController">
        Welcome to ng
</body>

</html>

First Module

<html ng-app="myApp">

<head>
    <script src="angular.min.js"></script>
    <script>
        var myFirstApp = angular.module('myApp', []);
        console.log("Hello World");
    </script>
</head>

<body>
    Welcome to ng
</body>

</html>

Hello World

<html ng-app="myFirstApp">
<head>
    <script src="angular.min.js"></script>
    <script>
        console.log("Hello World");
    </script>
</head>
<body>
        Welcome to ng 
</body>
</html>

Kickstart

1)Download angular js from https://angularjs.org/

2)Place the angular.min.js in C:\xampp\htdocs\angular

3)Save html files in the same location

4)Start Apache server in xampp

5)Open html fie in browser

6) Use F12 key to view console in we browser