AngularJS

Angularjs - best practices

// app.js ---------------------------------------------------- 

'use strict';

angular
    .module('app', [
        'ngSanitize',
        'ngAnimate',
        'ngTouch',
        'ui.bootstrap',
        'app.home',
        'app.weather',
        'app.news',
        'app.story',
        'app.faq'
    ]);


// app.config.js ---------------------------------------------------- 


'use strict';

angular
    .module('app')
    .config(config);

function config($routeProvider,$compileProvider) {
    $routeProvider
        .otherwise({
            redirectTo: '/home'
        });

    $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|javascript|tel):/);
}


// storyDetails/storyDetails.controller.js ----------------------------------------------------


'use strict';

angular
    .module('app.story', ['app.story.route','app.story.StoryService'])
    .controller('StoryController', StoryController);

StoryController.$inject = ['StoryService','$log', '$location', '$sce'];

function StoryController(StoryService,$log, $location ,$sce) {
    var vm = this;

    vm.pageTitle = "Story Details";
    vm.storyDetails = [];

    vm.goHome = goHome;
    vm.getTrustedHtml = getTrustedHtml;

    getStoryDetails();

    /*get news details*/
    function getStoryDetails(){
        return getStory().then(function() {
            $log.info('Activated Story View');
        });
    }

    function getStory() {
        return StoryService.getStory()
            .then(function(data) {
                vm.storyDetails = data;
                return vm.storyDetails;
            });
    }
    /*goHome*/
    function goHome(){
        $location.path('/home');
    }

    /*getTrustedHtml*/
    function getTrustedHtml(string){
        return $sce.trustAsHtml(string)
    }
}


// storyDetails/storyDetails.route.js ----------------------------------------------------


'use strict';

angular
    .module('app.story.route', ['ngRoute'])
    .config(config);

function config($routeProvider) {
    $routeProvider
        .when('/storyDetails',{
            templateUrl: 'app/storyDetails/StoryDetails.html',
            controller: 'StoryController',
            controllerAs: 'vm'
        });
}

// storyDetails/storyDetails.service.js ----------------------------------------------------


'use strict';

angular
    .module('app.story.route', ['ngRoute'])
    .config(config);

function config($routeProvider) {
    $routeProvider
        .when('/storyDetails',{
            templateUrl: 'app/storyDetails/StoryDetails.html',
            controller: 'StoryController',
            controllerAs: 'vm'
        });
}


// storyDetails/storyDetails.service.js ---------------------------------------------------- 


'use strict';

angular
    .module('app.story.route', ['ngRoute'])
    .config(config);

function config($routeProvider) {
    $routeProvider
        .when('/storyDetails',{
            templateUrl: 'app/storyDetails/StoryDetails.html',
            controller: 'StoryController',
            controllerAs: 'vm'
        });
}


// storyDetails/StoryDetails.html ---------------------------------------------------- 


<div class="story-container">
    <p class="content" data-ng-bind-html="vm.storyDetails.text"></p>
    <!--End headline-->

    <div class="contact">{{vm.storyDetails.authorName}}, <a href="javascript:" data-ng-href="mailto:{{vm.storyDetails.authorEmail}}">{{vm.storyDetails.authorEmail}}</a> for contact.</div>
    <!--End .contact-->
</div>
<!--End story container-->

<div class="recommended-stories">
    <h3>STORIES RECOMMENDED FOR YOU:</h3>
    <ul>
        <li data-ng-repeat="story in vm.storyDetails.recommendedStories">
            <a href="javascript:">
                <img src="assets/i/story-icon.jpg" data-ng-src="{{story.img}}" alt="icon">
                <div class="desc"  data-ng-bind-html="vm.getTrustedHtml(story.desc)"></div>
            </a>
        </li>
    </ul>
</div>

customDirective.js - basic custom Directive for templating

myApp.directive('appInfo', function () {
    return {
        restrict: 'E',
        scope: {
            info: '='
        },
        templateUrl: 'js/directives/appInfo.html'
    };
});

/*
 'A' - <span ng-sparkline></span>
 'E' - <ng-sparkline></ng-sparkline>
 'C' - <span class="ng-sparkline"></span>
 'M' - <!-- directive: ng-sparkline -->
*/

/*
 @ means that the changes from the controller scope will be reflected in the directive scope but if you modify the value in the directive scope, the controller scope variable will not get affected.

 @ always expects the mapped attribute to be an expression. This is very important; because to make the “@” prefix work, we need to wrap the attribute value inside {{}}.

 = is birectional so if you change the variable in directive scope, the controller scope variable gets affected as well

 & is used to bind controller scope method so that if needed we can call it from the directive
*/

index.html - ang app with module and controller

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Basic AngularJS Project</title>
    <script src="lib/angular.min.js"></script>
</head>
<body data-ng-app="myApp">

<div ng-controller="MainController">

    <p> Student firstName: {{ firstName }}</p>
    <p> Student lastName: {{ lastName }}</p>
    <p> Student fees: {{ fees }}</p>
    <p> Student lastName: {{ fees }}</p>

    <ul ng-repeat="subject in student.subjects">
        <li>Subject name: {{ subject.name }}, Subject mark: {{ subject.marks }}</li>
    </ul>

    <p> Student lastName: {{ student.fullName() }}</p>

</div>

<!-- Modules -->
<!--<script src="js/myApp.js"></script>-->
<script>
    var myApp= angular.module('myApp', []);
</script>

<!-- Controllers -->
<!--<script src="js/controllers/MainController.js"></script>-->
<script>

    myApp.controller('MainController', ['$scope', function($scope) {
        $scope.firstName = "Shota";
        $scope.lastName = "Kar";
        $scope.fees = 500;

        $scope.semester = {
            semTitle: "winter",
            status: "5 month"
        };

        $scope.student = {
            subjects: [
                {name: 'Physics', marks: 70},
                {name: 'Chemistry', marks: 80},
                {name: 'Math', marks: 65},
                {name: 'English', marks: 75},
                {name: 'Hindi', marks: 67}
            ],
            fullName: function () {
                var studentFName = $scope.firstName;
                var studentLName = $scope.lastName;
                return studentFName + " " + studentLName;
            }
        };
    }]);
</script>

</body>
</html>

index.html - basic Ang app

<!DOCTYPE html>
<html lang="en" ng-app>
<head>
    <meta charset="UTF-8">
    <title>Basic AngularJS Project</title>
    <script src="lib/angular.min.js"></script>
</head>
<body>

<input type="text" name="" id="" ng-model="bindName"/>
{{ bindName }}

</body>
</html>

index.html - basic custom Directive

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Basic AngularJS Project</title>
    <script src="lib/angular.min.js"></script>
</head>
<body data-ng-app="myApp">

<div ng-controller="MainController">
    <app-info info="someData"></app-info>
</div>

<!-- Modules -->
<!--<script src="js/myApp.js"></script>-->
<script>
    var myApp = angular.module('myApp', []);
</script>

<!-- Controllers -->
<!--<script src="js/controllers/MainController.js"></script>-->
<script>
    myApp.controller('MainController', ['$scope', function ($scope) {
        $scope.someData = "bayayi";
    }]);
</script>

<!-- Directives -->
<!--<script src="js/directives/appInfo.js"></script>-->
<script>
    myApp.directive('appInfo', function () {
        return {
            restrict: 'E',
            scope: {
                info: '='
            },
            templateUrl: 'js/directives/appInfo.html'
        };
    });

</script>

<!-- js/directives/appInfo.html -->
<!--
<p> {{ info }}</p>
-->

</body>
</html>

<!-- example: http://jsfiddle.net/shidhincr/pJLT8/10/light/-->

index.html - getting and displaying json data from url

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Basic AngularJS Project</title>
    <script src="lib/angular.min.js"></script>
</head>
<body data-ng-app="myApp">

<div ng-controller="MainController">
    <p> {{ serviceData.city_name }} </p>
    <p> {{ serviceData.country }} </p>

    <ul ng-repeat="day in serviceData.days">
        <li>{{ day.datetime | date }}</li>
    </ul>
</div>

<!-- Modules -->
<!--<script src="js/myApp.js"></script>-->
<script>
    var myApp = angular.module('myApp', []);
</script>

<!-- Controllers -->
<!--<script src="js/controllers/MainController.js"></script>-->
<script>
    myApp.controller('MainController', ['$scope', 'myService', function($scope, myService) {

        myService.success(function(data) {
            $scope.serviceData = data;
        });

    }]);
</script>

<!-- Services -->
<!--<script src="js/services/myService.js"></script>-->
<script>
    myApp.factory('myService', ['$http', function ($http) {

        return $http.get('http://s3.amazonaws.com/codecademy-content/courses/ltp4/forecast-api/forecast.json')
                .success(function (data) {
                    return data;
                })
                .error(function (err) {
                    return err;
                });
    }]);
</script>

</body>
</html>

index.html - view routing full

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Basic AngularJS Project</title>
    <script src="lib/angular.min.js"></script>
    <script src="lib/angular-route.min.js"></script>
</head>
<body data-ng-app="myApp">

<div ng-view></div>

<!-- Modules -->
<!--<script src="js/myApp.js"></script>-->
<script>
    var myApp = angular.module('myApp', ['ngRoute']);

    myApp.config(function ($routeProvider) {
        $routeProvider
            .when('/', {
                controller: 'MainController',
                templateUrl: 'view/home.html'
            })
            .when('/photos', {
                controller: 'MainController',
                templateUrl: 'view/photo.html'
            })
            .otherwise({
                redirectTo: '/'
            });
    });
</script>

<!-- Controllers -->
<!--<script src="js/controllers/MainController.js"></script>-->
<script>
    myApp.controller('MainController', ['$scope', 'myService', function($scope, myService) {

        myService.success(function(data) {
            $scope.serviceData = data;
        });

    }]);
</script>

<!-- Services -->
<!--<script src="js/services/myService.js"></script>-->
<script>
    myApp.factory('myService', ['$http', function ($http) {

        return $http.get('http://s3.amazonaws.com/codecademy-content/courses/ltp4/photos-api/photos.json')
            .success(function (data) {
                return data;
            })
            .error(function (err) {
                return err;
            });
    }]);
</script>

</body>
</html>

<!--view/home.html-->
<!------------
<ul ng-repeat="dataUnit in serviceData">
    <li> <p>{{ dataUnit.author }} </p> </li>
</ul>
<a href="#/photos"> go to the Photo gallery </a>
------------->

<!--view/photo.html-->
<!------------
<ul ng-repeat="dataUnit in serviceData">
    <li> <img ng-src="{{ dataUnit.url }}"> </li>
</ul>
------------->

MainController.js - basic Controller

myApp.controller('MainController', ['$scope', function($scope) {
    $scope.firstName = "Shota";
    $scope.lastName = "Kar";
    $scope.fees = 500;

    $scope.semester = {
        semTitle: "winter",
        status: "5 month"
    };

    $scope.student = {
        subjects: [
            {name: 'Physics', marks: 70},
            {name: 'Chemistry', marks: 80},
            {name: 'Math', marks: 65},
            {name: 'English', marks: 75},
            {name: 'Hindi', marks: 67}
        ],
        fullName: function () {
            var studentFName = $scope.firstName;
            var studentLName = $scope.lastName;
            return studentFName + " " + studentLName;
        }
    };
}]);

MainController.js - get data from service

myService.success(function(data) {
        $scope.serviceData = data;
});

myApp.js - basic view routing

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

myApp.config(function ($routeProvider) {
    $routeProvider
        .when('/', {
            controller: 'MainController',
            templateUrl: 'view/home.html'
        })
        .when('/photos', {
            controller: 'MainController',
            templateUrl: 'view/photo.html'
        })
        .otherwise({
            redirectTo: '/'
        });
});

myApp.js - basic app module definition

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

myService.js - basic service for getting json data from url

myApp.factory('myService', ['$http', function ($http) {

    return $http.get('http://s3.amazonaws.com/codecademy-content/courses/ltp4/forecast-api/forecast.json')
        .success(function (data) {
            return data;
        })
        .error(function (err) {
            return err;
        });
}]);