Using ng-grid in partial page - html

Is there any example of using ng-grid in partial pages. Whenever I try to use, an error pops up as TypeError: Cannot set property 'myData' of undefined.
My App.js
'use strict';
// Declare app level module which depends on filters, and services
angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives', 'myApp.controllers', 'ngGrid']).
config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller: 'MyCtrl1'});
$routeProvider.when('/view2', {templateUrl: 'partials/partial2.html', controller: 'MyCtrl2'});
$routeProvider.otherwise({redirectTo: '/view1'});
}]);
Controller.js
'use strict';
/* Controllers */
angular.module('myApp.controllers', ['ngGrid']).
controller('MyCtrl1', [function ($scope) {
$scope.myData = [{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{ name: "Enos", age: 34 },];
$scope.gridOptions = {
data: 'myData',
columnDefs: [{ field: 'name', displayName: 'Name' },
{ field: 'age', displayName: 'Age', cellTemplate: '<div ng-class="{green: row.getProperty(col.field) > 30}"><div class="ngCellText">{{row.getProperty(col.field)}}</div></div>' }],
showGroupPanel: true
};
}])
.controller('MyCtrl2', [function() {
}]);
//MyCtrl1.$inject = ['$scope'];
Partial1.html
<p>This is the partial for view 1.</p>
<div class="gridStyle" ng-grid="gridOptions"></div>
<div style="clear:both"/>
<p>{{ myData | json }}</p>
Partial2.html
<p>This is the partial for view 2.</p>
<p>
Showing of 'interpolate' filter:
{{ 'Current version is v%VERSION%.' | interpolate }}
</p>
And index.html
<!doctype html>
<html xmlns:ng="http://angularjs.org" id="ng-app" lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<title>My AngularJS App</title>
<link rel="stylesheet" href="css/app.css"/>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/ng-grid.css">
<link rel="stylesheet" href="css/Style.css">
<!-- In production use:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
-->
<script src="js/jquery-1.9.1.min.js"></script>
<script src="lib/angular/angular.js"></script>
<script src="js/ng-grid-2.0.5.min.js"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
<script src="js/controllers.js"></script>
</head>
<body>
<ul class="menu">
<li>view1</li>
<li>view2</li>
</ul>
<div ng-view></div>
<div>Angular seed app: v<span app-version></span></div>
</body>
</html>
Can you please say, why 'myData' is unavailable in Partial1.html?
Thanks in advance.


It is probably too late, but for the code right here
{name: "Enos", age: 34 },];
you don't need the coma. It should read:
{name: "Enos", age: 34 }];

Related

typeAhead autocomplete is not working

I am new to typeahead. I am getting the json data from remote and is shown in the network. The problem is The returned data is not autocompleted in the text box. Below is my code
Style and Script Used
<link href="{{ asset('css/bootstrap-tagsinput.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('css/bootstrap-tagsinput-typeahead.css') }}" rel="stylesheet" type="text/css" />
<script src="{{ asset('js/bootstrap-tagsinput.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('js/handlebars.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('js/typeahead.bundle.min.js') }}" type="text/javascript"></script>
Textbox
<input type="text" name="language" placeholder="Language" id="typeahead_lang" class="tagsinput-typeahead"/>
Script
<script>
$(document).ready(function () {
var cities = new Bloodhound({
datumTokenizer : Bloodhound.tokenizers.obj.whitespace('text'),
queryTokenizer : Bloodhound.tokenizers.whitespace,
remote: {
url: '{{ route("admin.packagelanguage") }}',
}
});
cities.initialize();
var elt = $('#typeahead_lang');
elt.tagsinput({
itemValue: 'value',
itemText: 'text',
typeaheadjs: {
name: 'cities',
displayKey: 'text',
source: cities.ttAdapter()
}
});
});
</script>
Json Returned data
[{text: 'English', value:'1' },{text: 'Afar', value:'2' },{text: 'Abkhazian', value:'3' },{text: 'Afrikaans', value:'4' },{text: 'Amharic', value:'5' }]
I am using laravel framework. How to autocomplete the returned the data in that text box. Please Help me.

A little late but,this code works for me.
var elt = $('#elt');
elt.tagsinput({
itemValue: 'value',
itemText: 'text',
typeaheadjs: [{
hint: true,
highlight: true,
minLength: 2
},{
name: 'cities',
displayKey: 'text',
source: cities.ttAdapter()
}
]
});

Custom Directives and Template doesn't work

I'm trying to make a custom directive that will show some elements that i previously declared in the MainController
HTML body:
<body ng-app="myApp" ng-controller="MainController">
<h1> Choose your Car </h1>
<div ng-repeat="car in cars">
<my-pattern info="car"></my-pattern>
</div>
<script src="js/MainController.js"></script>
<script src="js/myPattern.js"></script>
</body>
MainController:
angular.module('myApp').controller('MainController',function($scope) {
$scope.cars=[
{
icon: 'imgs/lamborghini.jpg',
name: 'Lamborghini',
price: 100000
},
{
icon: 'imgs/audi.png',
name: 'Audi',
price: 80000
}
];
});
Custom Directive
angular.module('myApp').directive('myPattern', function() {
return{
restrict: 'E',
scope: {
info: '='
},
templateUrl: 'js/directives/myPattern.html'
};
});
Template:
<img ng-src="{{info.icon}}">
<h2>{{info.name}}</h2>
<p>{{info.price}}</p>
If i don't use the directive but i just make the output whit the expressions <h2>{{car.name}}</h2> like this it work but with the custom directive it doesn't show me nothing.
I have all in different files.

This is working for me. There must be a issue with the location of your template with respect to your current HTML:
var app = angular.module("myApp", []);
angular.module('myApp').controller('MainController', function($scope) {
$scope.cars = [{
icon: 'imgs/lamborghini.jpg',
name: 'Lamborghini',
price: 100000
}, {
icon: 'imgs/audi.png',
name: 'Audi',
price: 80000
}];
});
angular.module('myApp').directive('myPattern', function() {
return {
restrict: 'E',
scope: {
info: '='
},
templateUrl: 'js/directives/myPattern.html'
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MainController">
<h1> Choose your Car </h1>
<div ng-repeat="car in cars">
<my-pattern info="car"></my-pattern>
</div>
<script type="text/ng-template" id="js/directives/myPattern.html">
<img ng-src="{{info.icon}}">
<h2>{{info.name}}</h2>
<p>{{info.price}}</p>
</script>
</div>

I solved, i didn't synchronize the directives in the Custom Directive and in the body HTML. The code was right but i make a mistake with the calling script of the directive:
<script src="js/directives/myPattern.js"></script>

Add login page to existing angularjs metronic theme

I am using metronic angularjs theme for creating a web app. But that theme doesn't have a login page and I want to create one for user login through facebook and normal login.
I was wondering how can I add a login page to an existing theme as I am new to angularjs.
I have tried creating a login master file at the same path where index file exists but I think I am doing something wrong.
This theme is using index file as a core for all the views and hence have header, footer and sidebar defined in the same for all the html files but I don't want to use index file as core for login page as we don't header and all for login screen.
index.html code:-
<!DOCTYPE html>
<html lang="en" data-ng-app="MetronicApp">
<!-- BEGIN HEAD -->
<head>
<title data-ng-bind="'abc | ' + $state.current.data.pageTitle"></title>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<meta content="" name="description"/>
<meta content="" name="author"/>
<!-- BEGIN GLOBAL MANDATORY STYLES -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&subset=all" rel="stylesheet" type="text/css"/>
<link href="../../../assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
<link href="../../../assets/global/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css"/>
<link href="../../../assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="../../../assets/global/plugins/uniform/css/uniform.default.css" rel="stylesheet" type="text/css"/>
<!-- END GLOBAL MANDATORY STYLES -->
<!-- BEGIN DYMANICLY LOADED CSS FILES(all plugin and page related styles must be loaded between GLOBAL and THEME css files ) -->
<link id="ng_load_plugins_before"/>
<!-- END DYMANICLY LOADED CSS FILES -->
<!-- BEGIN THEME STYLES -->
<!-- DOC: To use 'rounded corners' style just load 'components-rounded.css' stylesheet instead of 'components.css' in the below style tag -->
<link href="../../../assets/global/css/components.css" id="style_components" rel="stylesheet" type="text/css"/>
<link href="../../../assets/global/css/plugins.css" rel="stylesheet" type="text/css"/>
<link href="../../../assets/admin/layout2/css/layout.css" rel="stylesheet" type="text/css"/>
<link href="../../../assets/admin/layout2/css/themes/default.css" rel="stylesheet" type="text/css" id="style_color"/>
<link href="../../../assets/admin/layout2/css/custom.css" rel="stylesheet" type="text/css"/>
<!-- END THEME STYLES -->
<link rel="shortcut icon" href="favicon.ico"/>
</head>
<!-- END HEAD -->
<!-- BEGIN BODY -->
<body ng-controller="AppController" class="page-boxed page-header-fixed page-sidebar-closed-hide-logo page-container-bg-solid page-sidebar-closed-hide-logo page-on-load" ng-class="{'page-sidebar-closed': settings.layout.pageSidebarClosed}">
<!-- BEGIN PAGE SPINNER -->
<div ng-spinner-bar class="page-spinner-bar">
<div class="bounce1"></div>
<div class="bounce2"></div>
<div class="bounce3"></div>
</div>
<!-- END PAGE SPINNER -->
<!-- BEGIN HEADER -->
<div data-ng-include="'tpl/header.html'" data-ng-controller="HeaderController" class="page-header navbar navbar-fixed-top">
</div>
<!-- END HEADER -->
<div class="clearfix">
</div>
<!-- BEGIN CONTAINER -->
<div class="container">
<div class="page-container">
<!-- BEGIN SIDEBAR -->
<div data-ng-include="'tpl/sidebar.html'" data-ng-controller="SidebarController" class="page-sidebar-wrapper">
</div>
<!-- END SIDEBAR -->
<div class="page-content-wrapper">
<div class="page-content">
<!-- BEGIN STYLE CUSTOMIZER(optional) -->
<div data-ng-include="'tpl/theme-panel.html'" data-ng-controller="ThemePanelController" class="theme-panel hidden-xs hidden-sm">
</div>
<!-- END STYLE CUSTOMIZER -->
<!-- BEGIN ACTUAL CONTENT -->
<div ui-view class="fade-in-up">
</div>
<!-- END ACTUAL CONTENT -->
</div>
</div>
</div>
<!-- BEGIN FOOTER -->
<div data-ng-include="'tpl/footer.html'" data-ng-controller="FooterController" class="page-footer">
</div>
<!-- END FOOTER -->
</div>
<!-- END CONTAINER -->
<!-- BEGIN JAVASCRIPTS(Load javascripts at bottom, this will reduce page load time) -->
<!-- BEGIN CORE JQUERY PLUGINS -->
<!--[if lt IE 9]>
<script src="../../../assets/global/plugins/respond.min.js"></script>
<script src="../../../assets/global/plugins/excanvas.min.js"></script>
<![endif]-->
<script src="../../../assets/global/plugins/jquery.min.js" type="text/javascript"></script>
<script src="../../../assets/global/plugins/jquery-migrate.min.js" type="text/javascript"></script>
<script src="../../../assets/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="../../../assets/global/plugins/bootstrap-hover-dropdown/bootstrap-hover-dropdown.min.js" type="text/javascript"></script>
<script src="../../../assets/global/plugins/jquery-slimscroll/jquery.slimscroll.min.js" type="text/javascript"></script>
<script src="../../../assets/global/plugins/jquery.blockui.min.js" type="text/javascript"></script>
<script src="../../../assets/global/plugins/jquery.cokie.min.js" type="text/javascript"></script>
<script src="../../../assets/global/plugins/uniform/jquery.uniform.min.js" type="text/javascript"></script>
<!-- END CORE JQUERY PLUGINS -->
<!-- BEGIN CORE ANGULARJS PLUGINS -->
<script src="../../../assets/global/plugins/angularjs/angular.min.js" type="text/javascript"></script>
<script src="../../../assets/global/plugins/angularjs/angular-sanitize.min.js" type="text/javascript"></script>
<script src="../../../assets/global/plugins/angularjs/angular-touch.min.js" type="text/javascript"></script>
<script src="../../../assets/global/plugins/angularjs/plugins/angular-ui-router.min.js" type="text/javascript"></script>
<script src="../../../assets/global/plugins/angularjs/plugins/ocLazyLoad.min.js" type="text/javascript"></script>
<script src="../../../assets/global/plugins/angularjs/plugins/ui-bootstrap-tpls.min.js" type="text/javascript"></script>
<!-- END CORE ANGULARJS PLUGINS -->
<!-- BEGIN APP LEVEL ANGULARJS SCRIPTS -->
<script src="js/app.js" type="text/javascript"></script>
<script src="js/directives.js" type="text/javascript"></script>
<!-- END APP LEVEL ANGULARJS SCRIPTS -->
<!-- BEGIN APP LEVEL JQUERY SCRIPTS -->
<script src="../../../assets/global/scripts/metronic.js" type="text/javascript"></script>
<script src="../../../assets/admin/layout2/scripts/layout.js" type="text/javascript"></script>
<script src="../../../assets/admin/layout2/scripts/demo.js" type="text/javascript"></script>
<!-- END APP LEVEL JQUERY SCRIPTS -->
<script type="text/javascript">
/* Init Metronic's core jquery plugins and layout scripts */
$(document).ready(function() {
Metronic.init(); // Run metronic theme
Metronic.setAssetsPath('../../../assets/'); // Set the assets folder path
});
</script>
<!-- END JAVASCRIPTS -->
</body>
<!-- END BODY -->
</html>
app.js
var MetronicApp = angular.module("MetronicApp", [
"ui.router",
"ui.bootstrap",
"oc.lazyLoad",
"ngSanitize"
]);
MetronicApp.config(['$ocLazyLoadProvider', function($ocLazyLoadProvider) {
$ocLazyLoadProvider.config({
});
}]);
MetronicApp.config(['$controllerProvider', function($controllerProvider) {
$controllerProvider.allowGlobals();
}]);
MetronicApp.factory('settings', ['$rootScope', function($rootScope) {
var settings = {
layout: {
pageSidebarClosed: false, // sidebar state
pageAutoScrollOnLoad: 1000 // auto scroll to top on page load
},
layoutImgPath: Metronic.getAssetsPath() + 'admin/layout/img/',
layoutCssPath: Metronic.getAssetsPath() + 'admin/layout/css/'
};
$rootScope.settings = settings;
return settings;
}]);
MetronicApp.controller('AppController', ['$scope', '$rootScope', function($scope, $rootScope) {
$scope.$on('$viewContentLoaded', function() {
Metronic.initComponents();
});
}]);
MetronicApp.controller('HeaderController', ['$scope', function($scope) {
$scope.$on('$includeContentLoaded', function() {
Layout.initHeader(); // init header
});
}]);
MetronicApp.controller('SidebarController', ['$scope', function($scope) {
$scope.$on('$includeContentLoaded', function() {
Layout.initSidebar(); // init sidebar
});
}]);
MetronicApp.controller('ThemePanelController', ['$scope', function($scope) {
$scope.$on('$includeContentLoaded', function() {
Demo.init(); // init theme panel
});
}]);
MetronicApp.controller('FooterController', ['$scope', function($scope) {
$scope.$on('$includeContentLoaded', function() {
Layout.initFooter(); // init footer
});
}]);
MetronicApp.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
// Redirect any unmatched url
$urlRouterProvider.otherwise("/dashboard.html");
$stateProvider
// Dashboard
.state('dashboard', {
url: "/dashboard.html",
templateUrl: "views/dashboard.html",
data: {pageTitle: 'Admin Dashboard Template'},
controller: "DashboardController",
resolve: {
deps: ['$ocLazyLoad', function($ocLazyLoad) {
return $ocLazyLoad.load({
name: 'MetronicApp',
insertBefore: '#ng_load_plugins_before', // load the above css files before a LINK element with this ID. Dynamic CSS files must be loaded between core and theme css files
files: [
'../../../assets/global/plugins/morris/morris.css',
'../../../assets/admin/pages/css/tasks.css',
'../../../assets/global/plugins/morris/morris.min.js',
'../../../assets/global/plugins/morris/raphael-min.js',
'../../../assets/global/plugins/jquery.sparkline.min.js',
'../../../assets/admin/pages/scripts/index3.js',
'../../../assets/admin/pages/scripts/tasks.js',
'js/controllers/DashboardController.js'
]
});
}]
}
})
// AngularJS plugins
.state('fileupload', {
url: "/file_upload.html",
templateUrl: "views/file_upload.html",
data: {pageTitle: 'AngularJS File Upload'},
controller: "GeneralPageController",
resolve: {
deps: ['$ocLazyLoad', function($ocLazyLoad) {
return $ocLazyLoad.load([{
name: 'angularFileUpload',
files: [
'../../../assets/global/plugins/angularjs/plugins/angular-file-upload/angular-file-upload.min.js',
]
}, {
name: 'MetronicApp',
files: [
'js/controllers/GeneralPageController.js'
]
}]);
}]
}
})
// UI Select
.state('uiselect', {
url: "/ui_select.html",
templateUrl: "views/ui_select.html",
data: {pageTitle: 'AngularJS Ui Select'},
controller: "UISelectController",
resolve: {
deps: ['$ocLazyLoad', function($ocLazyLoad) {
return $ocLazyLoad.load([{
name: 'ui.select',
insertBefore: '#ng_load_plugins_before',
files: [
'../../../assets/global/plugins/angularjs/plugins/ui-select/select.min.css',
'../../../assets/global/plugins/angularjs/plugins/ui-select/select.min.js'
]
}, {
name: 'MetronicApp',
files: [
'js/controllers/UISelectController.js'
]
}]);
}]
}
})
// UI Bootstrap
.state('uibootstrap', {
url: "/ui_bootstrap.html",
templateUrl: "views/ui_bootstrap.html",
data: {pageTitle: 'AngularJS UI Bootstrap'},
controller: "GeneralPageController",
resolve: {
deps: ['$ocLazyLoad', function($ocLazyLoad) {
return $ocLazyLoad.load([{
name: 'MetronicApp',
files: [
'js/controllers/GeneralPageController.js'
]
}]);
}]
}
})
// Tree View
.state('tree', {
url: "/tree",
templateUrl: "views/tree.html",
data: {pageTitle: 'jQuery Tree View'},
controller: "GeneralPageController",
resolve: {
deps: ['$ocLazyLoad', function($ocLazyLoad) {
return $ocLazyLoad.load([{
name: 'MetronicApp',
insertBefore: '#ng_load_plugins_before', // load the above css files before '#ng_load_plugins_before'
files: [
'../../../assets/global/plugins/jstree/dist/themes/default/style.min.css',
'../../../assets/global/plugins/jstree/dist/jstree.min.js',
'../../../assets/admin/pages/scripts/ui-tree.js',
'js/controllers/GeneralPageController.js'
]
}]);
}]
}
})
// Form Tools
.state('formtools', {
url: "/form-tools",
templateUrl: "views/form_tools.html",
data: {pageTitle: 'Form Tools'},
controller: "GeneralPageController",
resolve: {
deps: ['$ocLazyLoad', function($ocLazyLoad) {
return $ocLazyLoad.load([{
name: 'MetronicApp',
insertBefore: '#ng_load_plugins_before', // load the above css files before '#ng_load_plugins_before'
files: [
'../../../assets/global/plugins/bootstrap-fileinput/bootstrap-fileinput.css',
'../../../assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css',
'../../../assets/global/plugins/jquery-tags-input/jquery.tagsinput.css',
'../../../assets/global/plugins/bootstrap-markdown/css/bootstrap-markdown.min.css',
'../../../assets/global/plugins/typeahead/typeahead.css',
'../../../assets/global/plugins/fuelux/js/spinner.min.js',
'../../../assets/global/plugins/bootstrap-fileinput/bootstrap-fileinput.js',
'../../../assets/global/plugins/jquery-inputmask/jquery.inputmask.bundle.min.js',
'../../../assets/global/plugins/jquery.input-ip-address-control-1.0.min.js',
'../../../assets/global/plugins/bootstrap-pwstrength/pwstrength-bootstrap.min.js',
'../../../assets/global/plugins/bootstrap-switch/js/bootstrap-switch.min.js',
'../../../assets/global/plugins/jquery-tags-input/jquery.tagsinput.min.js',
'../../../assets/global/plugins/bootstrap-maxlength/bootstrap-maxlength.min.js',
'../../../assets/global/plugins/bootstrap-touchspin/bootstrap.touchspin.js',
'../../../assets/global/plugins/typeahead/handlebars.min.js',
'../../../assets/global/plugins/typeahead/typeahead.bundle.min.js',
'../../../assets/admin/pages/scripts/components-form-tools.js',
'js/controllers/GeneralPageController.js'
]
}]);
}]
}
})
// Date & Time Pickers
.state('pickers', {
url: "/pickers",
templateUrl: "views/pickers.html",
data: {pageTitle: 'Date & Time Pickers'},
controller: "GeneralPageController",
resolve: {
deps: ['$ocLazyLoad', function($ocLazyLoad) {
return $ocLazyLoad.load([{
name: 'MetronicApp',
insertBefore: '#ng_load_plugins_before',
files: [
'../../../assets/global/plugins/clockface/css/clockface.css',
'../../../assets/global/plugins/bootstrap-datepicker/css/bootstrap-datepicker3.min.css',
'../../../assets/global/plugins/bootstrap-timepicker/css/bootstrap-timepicker.min.css',
'../../../assets/global/plugins/bootstrap-colorpicker/css/colorpicker.css',
'../../../assets/global/plugins/bootstrap-daterangepicker/daterangepicker-bs3.css',
'../../../assets/global/plugins/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css',
'../../../assets/global/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js',
'../../../assets/global/plugins/bootstrap-timepicker/js/bootstrap-timepicker.min.js',
'../../../assets/global/plugins/clockface/js/clockface.js',
'../../../assets/global/plugins/bootstrap-daterangepicker/moment.min.js',
'../../../assets/global/plugins/bootstrap-daterangepicker/daterangepicker.js',
'../../../assets/global/plugins/bootstrap-colorpicker/js/bootstrap-colorpicker.js',
'../../../assets/global/plugins/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js',
'../../../assets/admin/pages/scripts/components-pickers.js',
'js/controllers/GeneralPageController.js'
]
}]);
}]
}
})
// Custom Dropdowns
.state('dropdowns', {
url: "/dropdowns",
templateUrl: "views/dropdowns.html",
data: {pageTitle: 'Custom Dropdowns'},
controller: "GeneralPageController",
resolve: {
deps: ['$ocLazyLoad', function($ocLazyLoad) {
return $ocLazyLoad.load([{
name: 'MetronicApp',
insertBefore: '#ng_load_plugins_before',
files: [
'../../../assets/global/plugins/bootstrap-select/bootstrap-select.min.css',
'../../../assets/global/plugins/select2/select2.css',
'../../../assets/global/plugins/jquery-multi-select/css/multi-select.css',
'../../../assets/global/plugins/bootstrap-select/bootstrap-select.min.js',
'../../../assets/global/plugins/select2/select2.min.js',
'../../../assets/global/plugins/jquery-multi-select/js/jquery.multi-select.js',
'../../../assets/admin/pages/scripts/components-dropdowns.js',
'js/controllers/GeneralPageController.js'
]
}]);
}]
}
})
// Advanced Datatables
.state('datatablesAdvanced', {
url: "/datatables/advanced.html",
templateUrl: "views/datatables/advanced.html",
data: {pageTitle: 'Advanced Datatables'},
controller: "GeneralPageController",
resolve: {
deps: ['$ocLazyLoad', function($ocLazyLoad) {
return $ocLazyLoad.load({
name: 'MetronicApp',
insertBefore: '#ng_load_plugins_before', // load the above css files before '#ng_load_plugins_before'
files: [
'../../../assets/global/plugins/select2/select2.css',
'../../../assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.css',
'../../../assets/global/plugins/datatables/extensions/Scroller/css/dataTables.scroller.min.css',
'../../../assets/global/plugins/datatables/extensions/ColReorder/css/dataTables.colReorder.min.css',
'../../../assets/global/plugins/select2/select2.min.js',
'../../../assets/global/plugins/datatables/all.min.js',
'js/scripts/table-advanced.js',
'js/controllers/GeneralPageController.js'
]
});
}]
}
})
// Ajax Datetables
.state('datatablesAjax', {
url: "/datatables/ajax.html",
templateUrl: "views/datatables/ajax.html",
data: {pageTitle: 'Ajax Datatables'},
controller: "GeneralPageController",
resolve: {
deps: ['$ocLazyLoad', function($ocLazyLoad) {
return $ocLazyLoad.load({
name: 'MetronicApp',
insertBefore: '#ng_load_plugins_before', // load the above css files before '#ng_load_plugins_before'
files: [
'../../../assets/global/plugins/select2/select2.css',
'../../../assets/global/plugins/bootstrap-datepicker/css/bootstrap-datepicker3.min.css',
'../../../assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.css',
'../../../assets/global/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js',
'../../../assets/global/plugins/select2/select2.min.js',
'../../../assets/global/plugins/datatables/all.min.js',
'../../../assets/global/scripts/datatable.js',
'js/scripts/table-ajax.js',
'js/controllers/GeneralPageController.js'
]
});
}]
}
})
// User Profile
.state("profile", {
url: "/profile",
templateUrl: "views/profile/main.html",
data: {pageTitle: 'User Profile'},
controller: "UserProfileController",
resolve: {
deps: ['$ocLazyLoad', function($ocLazyLoad) {
return $ocLazyLoad.load({
name: 'MetronicApp',
insertBefore: '#ng_load_plugins_before', // load the above css files before '#ng_load_plugins_before'
files: [
'../../../assets/global/plugins/bootstrap-fileinput/bootstrap-fileinput.css',
'../../../assets/admin/pages/css/profile.css',
'../../../assets/admin/pages/css/tasks.css',
'../../../assets/global/plugins/jquery.sparkline.min.js',
'../../../assets/global/plugins/bootstrap-fileinput/bootstrap-fileinput.js',
'../../../assets/admin/pages/scripts/profile.js',
'js/controllers/UserProfileController.js'
]
});
}]
}
})
// User Profile Dashboard
.state("profile.dashboard", {
url: "/dashboard",
templateUrl: "views/profile/dashboard.html",
data: {pageTitle: 'User Profile'}
})
// User Profile Account
.state("profile.account", {
url: "/account",
templateUrl: "views/profile/account.html",
data: {pageTitle: 'User Account'}
})
// User Profile Help
.state("profile.help", {
url: "/help",
templateUrl: "views/profile/help.html",
data: {pageTitle: 'User Help'}
})
// Todo
.state('todo', {
url: "/todo",
templateUrl: "views/todo.html",
data: {pageTitle: 'Todo'},
controller: "TodoController",
resolve: {
deps: ['$ocLazyLoad', function($ocLazyLoad) {
return $ocLazyLoad.load({
name: 'MetronicApp',
insertBefore: '#ng_load_plugins_before', // load the above css files before '#ng_load_plugins_before'
files: [
'../../../assets/global/plugins/bootstrap-datepicker/css/datepicker3.css',
'../../../assets/global/plugins/select2/select2.css',
'../../../assets/admin/pages/css/todo.css',
'../../../assets/global/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js',
'../../../assets/global/plugins/select2/select2.min.js',
'../../../assets/admin/pages/scripts/todo.js',
'js/controllers/TodoController.js'
]
});
}]
}
})
}]);
MetronicApp.run(["$rootScope", "settings", "$state", function($rootScope, settings, $state) {
$rootScope.$state = $state; // state to be accessed from view
}]);
It would be great if someone can help me with this.
Thanks

Introduction:
Unfortunately almost every theme bought on internet should be "ready to use" but in reality are filled of jquery plugins and needs to be organized with a different architecture: managing dependencies with bower/npm, have good gulp scripts to manage most used tasks, removing all jquery code from controllers, substituting jquery dependencies with angular dependencies and removing all components that you will not use.
Answer:
No, you don't need a "login master file" (or index.html and login.html) if you well organize the routes. Angular is a Single Page Application framework and not a Two Page Application :)
Usually I use the ui-router and I prefere organize states in two main groups public and private and then I create many child states of them:
$stateProvider
.state('public', {
abstract: true,
template: "<ui-view/>"
})
.state('public.site', {
url: '/site',
controllerAs: 'vm',
controller: 'SiteCtrl',
templateUrl: 'site/_site.html'
})
.state('public.site.home', {
url: '/',
controllerAs: 'vm',
controller: 'HomeCtrl',
templateUrl: 'home/_home.html'
})
.state('public.site.product', {
url: '/products',
controllerAs: 'vm',
controller: 'ProductCtrl',
templateUrl: 'product/_product.html'
})
.state('public.login', {
url: '/login',
controllerAs: 'vm',
controller: 'LoginCtrl',
templateUrl: 'login/_login.html'
});
$stateProvider
.state('private', {
abstract: true,
template: "<ui-view/>"
})
.state('private.admin', {
url: '/admin',
controllerAs: 'admin',
controller: 'AdminCtrl',
templateUrl: 'admin/_admin.html'
})
.state('private.admin.category', {
url: '/categories',
controllerAs: 'vm',
controller: 'CategoryCtrl',
templateUrl: 'category/_category.html'
})
.state('private.admin.product', {
abstract: true,
url: '/products',
template: '<ui-view/>'
})
.state('private.admin.product.list', {
url: '/',
controllerAs: 'vm',
controller: 'ProductListCtrl',
templateUrl: 'product/_product.list.html'
})
.state('private.admin.product.edit', {
url: '/edit/{id}',
controllerAs: 'vm',
controller: 'ProductEditCtrl',
templateUrl: 'product/_product.edit.html'
});
The states public.site and private.admin are important because are the parent of all public or private routes. Will be the parent layout where I place the header, menu, navigation, footer etc. For example my _admin.html is look like:
<div id="header">
HEADER ADMIN
</div>
<aside id="menu">
<ul>
<li>
<a ui-sref="private.admin.category">Categories</a>
</li>
<li>
<a ui-sref="private.admin.product.list">Products</a>
</li>
...
...
</ul>
</aside>
<div ui-view class="content">
<!-- admin child states will be injected here -->
</div>
Generally the login page has a different layout of the site or the admin panel. There are no header, site menu, no navigation etc.. only there is a login form. For this reason the login state public.login is not a child of public.site.
And finally I show you my index.html. Is a clean/empty body html with no html code:
<html ng-app="app">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title page-title>Default Title</title>
<link rel="stylesheet" href="path/of/styles/abcd.css" />
<!-- all css files included here -->
</head>
<body ng-controller="MainCtrl as main">
<div ui-view>
<!-- all states will be injected here -->
</div>
<script src="path/of/scripts/bcds.js"></script>
<!-- all js files included here -->
</body>
</html>
Originally answered here

Cannot get separate views to appear in index.html, and controller is also not working

I'm just starting out with Angular and most of programming in general. I'm trying to make a separate view1.html file appear on my index.html page but it won't, so I'm assuming it's a routing problem. I tried pasting the view1.html content in the body of my index.html to test it and it wasn't showing the controller content either. I'm sure they're simple mistakes but I can't find them. view.html is in a separate folder called views. I only have the javascript in the index.html page for convenience.
index.html
<!DOCTYPE html>
<html lang="en" ng-app='demoApp'>
<head>
<meta charset="UTF-8">
<title>First Angular App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js"></script>
<body>
<div>
<div ng-view></div>
</div>
<script>
// create module called "demoApp" under the variable name "demoApp"
var demoApp = angular.module('demoApp', []);
// ROUTING
demoApp.config(function ($routeProvider) {
$routeProvider
.when ('/',
{
controller: 'SimpleController',
templateUrl: 'views/view1.html'
})
.when('/view2',
{
controller: 'SimpleController',
templateUrl: 'views/view2.html'
})
.otherwise({ redirectTo: '/' });
});
// CONTROLLERS
demoApp.controller('SimpleController', function ($scope) {
$scope.customers = [
{ name: 'Caleb', city: 'Indianapolis' },
{ name: 'Samantha', city: 'Zionsville' },
{ name: 'Tim', city: 'Palo Alto' }
];
$scope.addCustomer = function () {
$scope.customers.push(
{
name: $scope.newCustomer.name,
city: $scope.newCustomer.city
});
};
}
</script>
</body>
</html>
view1.html
<h2>View 1</h2>
Name:
<input type="text" ng-model="name" />
<ul>
<li ng-repeat="cust in customers"></li>
</ul>
Customer Name:
<input type="text" ng-model="newCustomer.name" />
<br>Customer City:
<input type="text" ng-model="newCustomer.city" />
<br>
<button ng-click="addCustomer()">Add Customer</button>
View 2
</div>

You need to include the script for angular's router.
<head>
<meta charset="UTF-8">
<title>First Angular App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular-route.min.js"></script>
Also, looks like you're missing a closing </head> tag.
Here's a working version of your HTML file:
<!DOCTYPE html>
<html lang="en" ng-app='demoApp'>
<head>
<meta charset="UTF-8">
<title>First Angular App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular-route.js"></script>
</head>
<body>
<div>
<div ng-view></div>
</div>
<script>
// create module called "demoApp" under the variable name "demoApp"
var demoApp = angular.module('demoApp', ['ngRoute']);
// ROUTING
demoApp.config(function ($routeProvider) {
$routeProvider
.when ('/',
{
controller: 'SimpleController',
templateUrl: 'view1.html'
})
.when('/view2',
{
controller: 'SimpleController',
templateUrl: 'view2.html'
})
.otherwise({ redirectTo: '/' });
});
// CONTROLLERS
demoApp.controller('SimpleController', function ($scope) {
$scope.customers = [
{ name: 'Caleb', city: 'Indianapolis' },
{ name: 'Samantha', city: 'Zionsville' },
{ name: 'Tim', city: 'Palo Alto' }
];
$scope.newCustomer = { name: "", city: ""};
$scope.addCustomer = function () {
$scope.customers.push(
{
name: $scope.newCustomer.name,
city: $scope.newCustomer.city
});
};
});
</script>
</body>
</html>

google chart with extjs3.3.1 not give output

<html>
<link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.3.1/resources/css/ext-all.css"/>
<script type="text/javascript" src="http://extjs.cachefly.net/ext-3.3.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="http://extjs.cachefly.net/ext-3.3.1/ext-all-debug.js"></script>
<script type="text/javascript" src="http://dev.sencha.com/playpen/google-visualization/GVisualizationPanel.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
Ext.onReady(function() {
var lineChartDs = new Ext.data.SimpleStore({
fields: [
{name: 'yr', type: 'string'}
,{name: 'sales', type: 'int'}
,{name: 'expenses', type: 'int'}
],
data: [['2004',1000,400],['2005',1170,460],['2006',860,580],['2007',1030,540]]
});
var lineChart1 = new Ext.ux.GVisualizationPanel({
id: 'lineChart',
visualizationPkg: 'linechart',
title: 'Company Performance Sample',
store: lineChartDs,
columns: [
{dataIndex: 'yr', label: 'Year'}
,{dataIndex: 'sales', label: 'Sales'}
,{dataIndex: 'expenses', label: 'Expenses'}
]
})
new Ext.Viewport({
layout: 'fit',
items: [lineChart1]
});
});
</script>

there are problem with GVisualizationPanel.js file do the change in line no 23
tbl.addColumn(convert[f.type.type], c.label || c, id);
after that its working with extjs 3.3.1