I've tried to get to know how to work with Angular but have no luck. I don't know what i do wrong.
Here is my index.html:
<html ng-app="app">
<head>
<meta charset="utf-8">
<title>testAngular</title>
<link rel="stylesheet" type="text/css" href="core/css/style.css">
<script src="core/js/angular.min.js"></script>
<script src="core/js/angularRoute.min.js"></script>
<script src="Controllers/users.js"></script>
<script src="Services/router.js"></script>
</head>
<body>
<div class="container">
<p class="well">
Home
Users
Shop
</p>
<h3>Users</h3>
<hr class="vau">
<form>
<input class="form-control" type="text" ng-model="search">
</form>
<div ng-view=""></div>
</div>
</body>
</html>
Here is my router.js
'use strict';
angular.module('app', ['ngRoute'])
.config(function($routeProvider){
$routeProvider
.when('/', {
templateUrl: 'tpl/home.html'
})
.when('/users', {
templateUrl: 'tpl/users.html',
controller: 'userCtrl'
})
.when('/shop', {
templateUrl: 'tpl/shop.html'
})
.otherwise({ redirectTo: '/' });
});
Here is my users.js
'use strict';
angular.module('app', ['ngRoute'])
.controller('userCtrl', function($scope, $http){
$http.get('dataModel/users.json').then(function(res){
$scope.users = res.data;
});
});
and this is my users.html
<h3>Hello Users</h3>
<div ng-controller="userCtrl">
<table class="table table-hover">
<tr>
<th>pId</th>
<th>Vorname</th>
<th>Nachname</th>
<th>E-Mail</th>
<th>Abteilung</th>
</tr>
<tbody>
<tr ng-repeat="user in users | filter:search">
<td>{{user.pId}}</td>
<td>{{user.fName}}</td>
<td>{{user.lName}}</td>
<td>{{user.email}}</td>
<td>{{user.abtelung}}</td>
</tr>
</tbody>
</table>
</div>
<p>hello Users</p>
I don't know why the controller is not working. thank you very much for any idea and help.
When you are doing this:
angular.module('app', ['ngRoute'])
You are creating a new module named app, and overriding any existing module with the same name.
Instead, create the module once like that, and on other files when you want to retrieve the model, do it like:
angular.module('app')
Related
I'm new to angular js. Trying to use Angular Routing to show data from the database on a list page and a detail page. There is a table call employees in the database, I'm trying to use Angular Js $http service to display the list of employees and users can click each list to view details. I got it to listing results on the table.html page but it's not outpouring results on the view.html page. Any help, please? Thanks
Here is the angular script.
/* App Module */
var employeeApp = angular.module('employeeApp', [
'ngRoute',
'tableControllers'
]);
/* Controllers */
var tableControllers = angular.module('tableControllers', []);
tableControllers.controller('ListCtrl', ['$scope', '$http',
function($scope, $http) {
$http.get('data/json.php').success(function(data) {
$scope.employees = data;
});
}]);
tableControllers.controller('DetailCtrl', ['$scope', '$routeParams', '$http',
function($scope, $routeParams, $http) {
$http.get('data/json.php').success(function(data) {
$scope.employee = data;
});
}]);
employeeApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/page', {
templateUrl: 'pages/table.html',
controller: 'ListCtrl'
}).
when('/page/:employee_id', {
templateUrl: 'pages/view.html',
controller: 'DetailCtrl'
}).
otherwise({
redirectTo: '/page'
});
}]);
Here is the Index File
<!DOCTYPE html>
<html lang="en" ng-app="employeeApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Graphic Editor</title>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">
<script src="js/angular.min.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/app.js"></script>
</head>
<body>
<header></header>
<section>
<div class="container">
<!-- angular templating -->
<!-- this is where content will be injected -->
<div ng-view></div>
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Here is the view page
<table width="500" class="table table-striped table-bordered">
<tbody>
<tr>
<td width="22%">Name</td><td width="22%">{{employee.firstName}} {{employee.firstName}}</td>
</tr>
<tr>
<td>employee</td><td>{{employee.employee}}</td>
</tr>
<tr>
<td>Address</td><td>{{employee.addressLine1}} {{employee.addressLine2}}</td>
</tr>
<tr>
<td>Action</td><td>Edit</td>
</tr>
</tbody>
</table>
<p>{{caption}}</p>
I have a Simple page like
<body ng-app="myApp">
<div>
<h1>Courses</h1>
<ul class="nav">
<li>Route 1</li>
</ul>
</div>
<div ui-view>
</div>
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-ui-router.min.js"></script>
<script src="Scripts/app/app.js"></script>
And a app.js file like :
var myApp = angular.module('myApp', ['ui.router']);
var configFunction = function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('route1', {
url: "/courses",
templateUrl: "Scripts/app/views/Course/CourseList.html"
});
}
configFunction.$inject = ['$stateProvider', '$urlRouterProvider'];
myApp.config(configFunction);
and in my CourseList.html I have :
<script src="../../Controller/Course/CourseController.js"></script>
<div ng-controller="CourseController">
<h1>index</h1>
<table class="table table-striped">
<thead>
<tr>
<td>Id#</td>
<td>Name</td>
</tr>
</thead>
<tbody ng-repeat="course in courses |orderBy:'Id' ">
<tr>
<td>{{course.Id}}</td>
<td>{{course.Name}}</td>
</tr>
</tbody>
</table>
</div>
And my controller code:
angular.module('myApp').controller('CourseController', function ($scope, $http) {
$scope.course = {};
$http.get('/api/Course').success(function (data) {
$scope.courses = data;
});
});
Now when I click on Route 1 link I give this Error:
Error: [ng:areq] Argument 'CourseController' is not a function, got undefined
And when I comment controller refrence in CourseList.html and add it to index.html it's worke!!!
Is there any way that I dont refrence all controllers in Index.html?
You need to call your controller script file in your main screen
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-ui-router.min.js"></script>
**//call your controller in here.**
<script src="../../Controller/Course/CourseController.js"></script>(Check
the url is correct)
<script src="Scripts/app/app.js"></script>
Because your controller does not defined before your html is defined on stateProvider
What i need is when i change the value from child window textbox the reflect should appear on parent window records in a table. And here is my parent.html.
-----index.html--------
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.4.0-beta.6" data-semver="1.4.0-beta.6" src="https://code.angularjs.org/1.4.0-beta.6/angular.js"></script>
<link href="style.css" rel="stylesheet"/>
<script src="script.js"></script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="PeopleCtrl">
<form method=post action='' name=f1>
<table border="1" >
<tr>
<th>Id</th>
<th>Name</th>
<th>Age</th>
<th> Edit here</th>
</tr>
<tr ng-repeat="person in people">
<td><span id="d" name='p_name'>{{person.id}}</span></td>
<td><span id="c" name='q_name'>{{person.name}}</span></td>
<td><span id="e" name='r_name'>{{person.age}}</span></td>
<td>Edit</td>
</tr>
</table>
</form>
</div>
</div>
<script>
var myApp=angular.module('myApp', []);
myApp.controller('PeopleCtrl', function($scope,$window) {
$scope.people = ([
{
id: 1,
name: "Peter",
age: 21},
{
id: 2,
name: "David",
age: 20},
{
id: 3,
name: "Anil",
age: 22}
])
$scope.foo = function() {
$window.open('index1.html');
};
});
</script>
And here is my child window:
------index1.html-------
<!DOCTYPE html>
<head>
<script data-require="angular.js#1.4.0-beta.6" data-semver="1.4.0-beta.6" src="https://code.angularjs.org/1.4.0-beta.6/angular.js"></script>
<script>
function post_value(){
opener.document.f1.p_name.value = document.frm.c_name.value;
opener.document.f1.q_name.value = document.frm.d_name.value;
opener.document.f1.r_name.value = document.frm.e_name.value;
self.close();
}
</script>
<title>(Type a title for your page here)</title>
</head>
<body ng-app="mainApp" >
<div ng-controller='childController'>
<form name="frm" method=post action=''>
<table border="0">
<tr><td>Enter id:</td><td><input id="d" type="text" name="c_name" ></td></tr>
<tr><td>Enter name:</td><td><input id="c" type="text" name="d_name" ></td></tr>
<tr><td>Enter age:</td><td><input id="e" type="text" name="e_name" ></td></tr>
<tr><td><button onclick="post_value();">Save</button></td></tr>
</table>
</form>
</div>
</body>
</html>
And here is my plunker: http://plnkr.co/edit/qF2zvp0VYY9wMvWzt3XK?p=preview
You shouldn't open details in other window. Then you can't persist data in your app because there is no way to communicate between two windows.
I don't think so you should make this thing this complicated as you can make you app as SPA (Single Page Application), For that you need to use ng-route which will dynamically load the pages on basis of url changes.
Using below html
<div ng-view></div>
Then you need write configuration for you app, when to load which template with which controller
Config
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider
.when('/people', {
templateUrl: 'people.html',
controller: 'PeopleCtrl'
})
.when('/people/:id', {
templateUrl: 'details.html',
controller: 'detailsCtrl'
})
.otherwise({
redirectTo: '/people'
});
}
]);
Working Plunkr here
I am trying to create a simple views with angualrjs + ngRoute.
Why it doesn't work for me???
Please, can anyone look at my Plunker example, and explain to me what am I doing wrong?
my index.html:
<!DOCTYPE html>
<html>
<head>
<title>Angular Route training</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://code.angularjs.org/1.3.5/angular.js"></script>
<script src="https://code.angularjs.org/1.3.5/angular-route.js"></script>
<script src="js/app.js"></script>
</head>
<body>
<div class="main_container">
<div class="inner" ng-app="app">
<div class="container" ng-controller="MainController">
<span ng-cloak>{{text}}</span>
</div>
</div>
<div class="inner" ng-app="views">
<h3>Views Menu</h3>
<ul>
<li>Back to HOME</li>
<li>Our Developers</li>
<li>Our Designers</li>
</ul>
<div ng-view></div>
</div>
</div>
</body>
</html>
this is app.js:
var app = angular.module('app', []);
var views = angular.module('views', ['ngRoute']);
views.config(function($routeProvider, $locationProvider){
$routeProvider.
when('#/developers', {templateUrl: 'views/dev.html', controller: 'DevCtrl'}).
when('#/designers',{templateUrl: 'views/design.html',controller: 'DesignCtrl'}).
otherwise({ redirectTo: 'index.html' });
$locationProvider.html5Mode(true);
});
app.controller('MainController', function($scope) {
$scope.text = "Hello World!!!!";
});
views.controller('DevCtrl', function($scope) {
$scope.developers = [
{"name":"John", "family":"Doe"},
{"name":"Anna", "family":"Smith"},
{"name":"Peter", "family":"Jones"},
{"name":"Alex", "family":"Volkov"},
{"name":"Yaniv", "family":"Smith"},
]
});
views.controller('DesignCtrl', function($scope) {
$scope.designers = [
{"name":"Inna", "family":"Doe"},
{"name":"Anna", "family":"Smith"},
{"name":"Yafit", "family":"Jones"}
]
});
design.html:
<div id="designers" ng-controller="DesignCtrl">
<h3>Designers List</h3>
<table>
<tr>
<th>Name</th>
<th>Family</th>
</tr>
<tr ng-repeat="d in designers">
<td>{{d.name}}</td>
<td>{{d.family}}</td>
</tr>
</table>
</div>
and dev.html
<div id="developers" ng-controller="DevCtrl">
<h3>Developers List</h3>
<table>
<tr>
<th>Name</th>
<th>Family</th>
</tr>
<tr ng-repeat="dev in developers">
<td>{{dev.name}}</td>
<td>{{dev.family}}</td>
</tr>
</table>
</div>
thanks
The problem is incorrect usage of ng-app. Only declare ng-app once for your application, usually on the html element.
Then declare other modules as dependencies of your main module.
I put the ng-app declaration on the html tag and put your ng-routing in the app module, getting rid of the views module.
http://plnkr.co/edit/btL2QMyHxhDLH7cxZ1YV
var app = angular.module('app', ['ngRoute']);
app.config(function($routeProvider, $locationProvider){
$routeProvider.
when('/developers', {templateUrl: 'dev.html', controller: 'DevCtrl'}).
when('/designers',{templateUrl: 'design.html',controller: 'DesignCtrl'}).
otherwise({ redirectTo: '/index' });
// $locationProvider.html5Mode(true);
});
<html ng-app="app">
You can also put the view-logic in a separate module, but usually you will then also put it in a different file.
The html5mode is disabled because it triggered an error (it's a little bit tricky to make that work).
Note: it actually is possible to use multiple ng-app by manually bootstrapping them, but you really shouldn't do this unless you have a very good reason for it.
I think there is a problem way you declare the dependency within your app.js file and also console is complaining about $locationProvider.html5Mode(true);
If you want to declare the separate app you should do something like this
var app = angular.module('app', []);
var views = angular.module('views', []);
var mainApp = angular.module('mainApp', ['ngRoute','app','views']);
mainApp.config(function($routeProvider, $locationProvider){
$routeProvider.
when('/developers', {templateUrl: 'dev.html', controller: 'DevCtrl'}).
when('/designers',{templateUrl: 'design.html',controller: 'DesignCtrl'}).
otherwise({ redirectTo: 'index.html' });
//$locationProvider.html5Mode(true);
});
And here is the full working plunker http://plnkr.co/edit/LvPhShkkgTFQsFJ44Ggo?p=preview
I have read and tried applying all of the approaches I can find on SO but none of them work.
I just basically want to load a different view once the user logs in:
myApp.controller('LoginCtrl', ['$scope', '$rootScope', '$location', function($scope, $rootScope, $location) {
$scope.Login = function () {
$location.path('/view1');
// $scope.$apply(); <- error when trying this
};
}]);
Nothing happens. If I try $scope.$apply after changing the location then I get the 'action already in progress' error (http://docs.angularjs.org/error/$rootScope:inprog?p0=$apply)
I have also tried $location.url, etc. Can someone please clue me in on what is happening?
Here is my routing config:
angular.module('myApp', [
'ngRoute',
'myApp.filters',
'myApp.services',
'myApp.directives',
'myApp.controllers'
]).
config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/login', {templateUrl: 'views/login.html', controller: 'LoginCtrl' });
$routeProvider.when('/view1', {templateUrl: 'views/partial1.html', controller: 'MyCtrl1'});
$routeProvider.when('/view2', {templateUrl: 'views/partial2.html', controller: 'MyCtrl2'});
$routeProvider.otherwise({redirectTo: '/login'});
}]);
Index File:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Foxy Flakes of Steel</title>
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="assets/plugins/bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="assets/css/app.css" />
</head>
<body>
<div class="container">
<div class="row" ng-view></div>
</div>
<script src="assets/plugins/jquery/jquery-2.0.3.min.js"></script>
<script src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/plugins/angularjs/angular.min.js"></script>
<script src="assets/plugins/angularjs/angular-route.js"></script>
<script src="assets/js/app.js"></script>
<script src="assets/js/services.js"></script>
<script src="assets/js/controllers.js"></script>
<script src="assets/js/filters.js"></script>
<script src="assets/js/directives.js"></script>
</body>
</html>
And here is the login.html view:
<form class="col-md-5 col-md-offset-3">
<div class="rounded-gray">
<div class="row" style="padding: 30px;">
<div class="input-group" style="margin-bottom: 10px;">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input type="text" placeholder="username" class="form-control" ng-model="username">
</div>
<div class="input-group" style="margin-bottom: 10px;">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input type="text" placeholder="password" class="form-control" ng-model="password">
</div>
<div class="row">
Login
</div>
</div>
</div>
</form>
Two tips that I found;
you cannot use $location.path('/view1') during routing is on proress.
it's better to check logged in or not at the level of application stage.
app.run(['$rootScope', '$location', 'Auth', function ($rootScope, $location, Auth) {
$rootScope.$on('$routeChangeStart', function () {
if (!Auth.isLoggedIn()) {
$location.path('/login');
} else {
$location.path('/home');
}
});
}]);
Reference:
1. AngularJS and location.path()
2.
Redirecting to a certain route based on condition
3. AngularJS- Login and Authentication in each route and controller
Your Login link should be a button. The href is overriding your ng-click action.
<button type='button' class='btn btn-primary pull-right' ng-click='Login()'>
Login
</button>
Also, you don't need the semicolon inside ng-click.
(in-line styles are very bad form, btw)
You may use ng-href="#/view1" in your view instead of calling Login method from your controller via ng-click.