AngularJS Part 2 : Controllers

<html ng-app="myApp">
<head >
    <title></title>
    <script src="Scripts/angular.js"></script>
</head>
<body ng-controller="HomeCtrl">
         <div>
            <ul>
                <li ng-repeat="x in Friends">{{x}}</li>
            </ul>
         </div>
    <script>
        var app = angular.module("myApp", [])
        .controller("HomeCtrl", function ($scope) {
            $scope.Friends = ['Shalvin', 'Pankaj', 'Praseed'];
        });
    </script>
</body>
</html>

Controller in separate JavaScript file
App.js

var app = angular.module("myApp", [])
.controller("HomeCtrl", function ($scope) {
    $scope.Friends = ['Shalvin', 'Pankaj', 'Praseed'];
});

index.htm

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="myApp">
<head>
    <title></title>
    <script src="../Scripts/angular.js"></script>

    <script src="Apps/App.js"></script>
</head>
<body ng-controller="HomeCtrl">
    <ul>
        <li ng-repeat="x in Friends">{{x}}</li>
    </ul>
</body>

Controller Complex Array
AppComplex.js

var app = angular.module("myApp", [])
.controller("HomeCtrl", function ($scope) {
    $scope.Friends = [{ Name: 'Shalvin', Location: 'Kochi' },
        {Name:'Pankaj', Location :'NCR'},
        {Name:'Praseed', Location:'Alwaye'}];
});

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="myApp">
<head>
    <title></title>
    <script src="Scripts/angular.js"></script>
    <script src="Scripts/AppComplex.js"></script>
</head>
<body ng-controller="HomeCtrl">

    <ul>
        <li ng-repeat="x in Friends">{{x.Name}} located  at {{x.Location}}</li>
    </ul>
</body>
</html>

SQL for Todo

create database ShalvinTodo

use ShalvinTodo

create table Tasks(TaskId int identity(1,1) primary key, TaskName varchar(40), Status varchar(15))

insert into Tasks values ('Wath AngularJS Video', 'Ongoing')
insert into Tasks values ('.Net Saturday Class', 'Ongoing')
insert into Tasks values ('User session', 'Not started')
insert into Tasks values ('Shopping', 'Not started')

select * from Tasks

select * from Tasks where Status = 'Ongoing'

select TaskName from Tasks

select TaskName, Status from Tasks

delete from Tasks where TaskId = 3

update Tasks set Status = 'Finished' where TaskId = 2

C++ File Handling

Program to create a file and put value to it 

The header file for C++ file handling is fstram.h. We are making use of Output stream (ofstream) for outputting data from Program to file. Here the open method of ofstream class is used for opening the file. It is also possible to use the constructor of ofstream class.

#include <iostream.h>
#include <fstream.h>

int main()
{
    ofstream flout;
    flout.open("marks.dat", ios::out);
    char ans = 'y';
    int rollno;
    float marks;
    while(ans == 'y' || ans == 'Y')
    {
        cout<<"\n Enter Rollno. : ";
        cin>>rollno;
        cout<<"\n Enter Points :";
        cin>>points;
        flout<<rollno<<'\n'<<points<<'\n';
        cout<<"\n Want to enter more records?(y/n)..";
        cin>>ans;

    }
    flout.close();
    return 0;

}

The text file will be created in the bin folder.




Program to input details of 5 students and display them
This progam makes use of ofstream and ifstream classes.

#include <iostream.h>
#include <fstream.h>
#include <stdlib.h>

int main()
{
    system("cls");
    ofstream fout("student", ios::out);
    char name[30], ch;
    float marks = 0.0;

    //Loop to get 5 records
    for(int i = 0; i<5;i++)
    {
        cout<<"Student"<<(i+1)<<":\tName:";
        cin.get(name, 30);
        cout<<"\t\tMarks:";
        cin>>marks;
        cin.get(ch);
        fout<<name<<'\n'<<marks<<'\n';

    }
    fout.close();
    ifstream fin("student", ios::in);
    fin.seekg(0);
    cout<<"\n";

    for(i=0;i<5;i++)
    {
        fin.get(name, 30);
        fin.get(ch);
        fin>>marks;
        fin.get(ch);
        cout<<"Student Name :"<<name;
        cout<<"\tMarks :"<<marks<<"\n";
    }
    fin.close();
    return 0;
}

Writing to and reading from multiple files in succession

#include<iostream.h>
#include<fstream.h>
#include<stdlib.h>

int main()
{
    system("cls");
    //Create two files
    ofstream fileout;
    fileout.open("Stunames", ios::out);
    fileout<<"Arundhati \n"<<"Lakshmi \n"<<"Shalvin \\";
    fileout.close();
    fileout.open("stumarks", ios::out);
    fileout<<"100\n"<<"100\n"<<"95\n";
    fileout.close();

    //Read these files
    char line[80];
    ifstream filin;
    filin.open("stunames", ios::in);
    cout<<"The contents of studnames are given below\n";
    filin.getline(line, 80);
    cout<<line<<"\n";
    filin.getline(line, 80);
    cout<<line<<"\n";
    filin.getline(line, 80);
    cout<<line<<"\n";
    filin.close();

    filin.open("stumarks", ios::in);
    cout<<"\nThe contents of stumarks file are given below\n";
    filin.getline(line, 80);
    cout<<line<<"\n";
    filin.getline(line, 80);
    cout<<line<<"\n";
    filin.getline(line, 80);
    cout<<line<<"\n";
    filin.close();
    return 0;
}

Display contents of a file using get() function
get() function read a byte of data.

#include <iostream.h>
#include <fstream.h>
#include <stdlib.h>

int main()
{
    system("cls");
    char ch;
    ifstream fin;
    fin.open("marks.dat",  ios::in);
    if(!fin)
    {
        cout<<"Cannot open file !!\n";
        return 1;
    }
    while(fin)
    {
        fin.get(ch);
        cout<<ch;
    }
    fin.close();
    return 0;

}

When end-of-file is reached, the stream associated  with the file becomes zero.

Output



Create a file using put() function
put() function will also write one byte at a time

The following program creates a ASCII chart of printable characters and displays them in 10 column format.

#include <iostream.h>
#include <fstream.h>
#include <stdlib.h>

int main()
{
    system("cls");
    ofstream fout;
    fout.open("Aschars", ios::app);
    if(!fout)
    {
        cout<<"the file cannot be opened!!\n";
        return 1;
    }
    char ch;
    int line = 0;
    for(int i = 33;i<128;i++)
    {
        cout.put(((char)i));
    }
    fout.close();

    ifstream fin;
    fin.open("Aschars", ios::in);
    fin.seekg(0);
    for(i = 33;i<129;i++)
    {
        fin.get(ch);
        cout<<"  "<<i<<"=";
        cout.put((char)(i));
        if(!(i%10))
        {
            cout<<endl;line++;
        }
        if(line >> 22)
        {
            system("PAUSE");
            line = 0;
        }
    }
    return 0;
}

read() and write() functions for working reading and writing entire structure

#include <iostream.h>
#include <fstream.h>
#include <string.h>
#include <stdlib.h>
struct customer
{
    char name[51];
    float balance;

};

int main()
{
    system("cls");
    customer savac;
    strcpy(savac.name, "Shalvin P D");
    savac.balance = 10500.50;
    ofstream fout;
    fout.open("Saving", ios::out|ios::binary);
    if(!fout)
    {
        cout<<"File cannot be openened\n";
        return 1;
    }
    fout.write((char *) &savac, sizeof(customer));
    fout.close();

    ifstream fin;
    fin.open("Saving", ios::in|ios::binary);
    fin.read((char *) &savac, sizeof(customer));
    cout<<savac.name;
    cout<<" has the balance amount of Rs. "<<savac.balance<<"\n";
    fin.close();
    return 0;
}

Output

SharePoint Pragmatically Obtaining NewForm and EditFormUrl

protected void Page_Load(object sender, EventArgs e)
{
      SPSite site = new SPSite("http://abc-pc");

      SPWeb web = site.RootWeb;
      SPList list = web.Lists["Employee"];

      ListBox1.Items.Add(list.DefaultNewFormUrl.ToString());
      ListBox1.Items.Add(list.DefaultEditFormUrl.ToString());
}

SharePoint Filling a GridView with List Information based on the DropDownList Selection

protected void Page_Load(object sender, EventArgs e)
 {
     if (!Page.IsPostBack)
     {
            SPSite site = new SPSite("http://abc-pc");

            SPWeb web = site.RootWeb;

           
            DropDownList1.DataSource = web.Lists;
            DropDownList1.DataTextField = "Title";
            DropDownList1.DataBind();
            
    }
}

protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
{
     SPSite site = new SPSite("http://abc-pc");

     SPWeb web = site.RootWeb;
     SPList list = web.Lists[DropDownList1.Text];
          
     var item = list.Items;
     GridView1.DataSource = item.GetDataTable();
     GridView1.DataBind();
}

Programatically adding items to SharePoint List

protected void btnAdd_Click(object sender, EventArgs e)
{
      SPSite site = new SPSite("http://abc-pc");

      SPWeb web = site.RootWeb;
      SPList list = web.Lists["Employee"];

      SPListItem li = list.Items.Add();
      li["Title"] = txtEmployeeName.Text;
      li["Location"] = txtLocation.Text;
      li.Update();
}

AngularJS for .Net Developers : Routes and AngularJS Seed

Just like Asp .Net MVC AngularJS too have Routes.
In AngularJS the difference is that it is client side Routing. Here you specify the Fragment Identified identified by #. The difference in using Fragment Identifier is it the Web Application is not making a round trip to the server which is an essential concept in Single Page Application.


A Module can have Config. Config in turn have Route.
In the previous example we hard coded Controller into View.

$routeProvider Service

The $routeProvider service is used to define a route.

AngularJS Seed

Instead of  manually creating the structure for AngularJS project we can make use of AngularJS Seed. AngularJS Seed will create the necessary routes, views, scripts, etc. for you.

Here I am adding AngularJS Seed to an empty Web Application Project.

App.js

App.js is present inside js folder.

angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives']).
  config(['$routeProvider', function($routeProvider) {
      $routeProvider
          .when('/view1', {
          template: '/partials/partial1.html',
          controller: MyCtrl1});
      $routeProvider
          .when('/view2', {
              template: '/partials/partial2.html',
              controller: MyCtrl2
          });
      $routeProvider
          .otherwise({ redirectTo: '/view1' });
  }]);

$routeProvider is having a when function which expects a Fragment Identifier, template, controller.

Template is a View or a piece of html functionality. Here when you access view1 fragment you will be accessing partial1.html template.



_LayoutAngular.cshtml

<!doctype html>
<html ng-app="myApp">
<head>
  <meta charset="utf-8">
  <title>My AngularJS App</title>
  <link rel="stylesheet" href="/css/app.css"/>
</head>
<body>
  <ul class="menu">
    <li><a href="#/view1">view1</a></li>
    <li><a href="#/view2">view2</a></li>
  </ul>

  @RenderBody()
  
  <div>Angular seed app: v<span app-version></span></div>

  <script src="/lib/angular/angular.js"></script>
  <script src="/js/app.js"></script>
  <script src="/js/services.js"></script>
  <script src="/js/controllers.js"></script>
  <script src="/js/filters.js"></script>
  <script src="/js/directives.js"></script>
</body>
</html>

Inside _LayouAngular.cshtml layout there are Urls.

ng-view

ng-view is the AngularJS equivalent of RenderBody in MVC or ContentPlaceHolder in Web
Forms.

Index.cshtml

@{
    Layout = "~/Views/Shared/_LayoutAngular.cshtml";
}
<h3>Shalvin P D - Index</h3>

<ng-view></ng-view>

Index.cshtml present inside Views/Angular is having the ng-view directive. Here the template will get injected.