View doesn't show Controller's data - angularjs

I have 4 files, View, a Module, a controller and a factory :
Module : project.module.js
(function () {
'use strict';
angular.module('BlurAdmin.pages.projects', [])
.config(routeConfig);
/** #ngInject */
function routeConfig($stateProvider, $urlRouterProvider) {
$stateProvider
.state('projects', {
url: '/projects',
template : '<ui-view autoscroll="true" autoscroll-body-top></ui-view>',
abstract: true,
title: 'Les projets',
Controller : 'ProjectController',
sidebarMeta: {
icon: 'ion-compose',
order: 250,
},
.state('projects.add', {
url: '/add',
templateUrl: 'app/pages/projects/add/addProject.html',
title: 'Ajouter un projet',
sidebarMeta: {
order: 800,
},
.state('projects.list', {
url: '/list',
templateUrl: 'app/pages/projects/list/listProjects.html',
title: 'List',
sidebarMeta: {
order: 900,
},
});
$urlRouterProvider.when('/projects','/projects/list');
}
})();
Controller : ProjectController.js
(function(){
'use strict';
angular.module('BlurAdmin.pages.projects')
.controller('ProjectController', ProjectController);
function ProjectController($state, $stateParams, $log, $scope, projectFactory) {
<!-- Value to show -->
$scope.addMessage = "see ME";
...}
})();
Factory : projectFactory.js
function(){
'use strict';
angular.module('BlurAdmin.pages.projects')
.factory('projectFactory', projectFactory);
function projectFactory($http, $stateParams) {
var factory = {};
....
}})();
View : addProject.html
<div class="col-md-6">
<div
ba-panel
ba-panel-title="Ajouter un projet"
ba-panel-class="with-scroll">
<form name="ProjectForm" ng-submit="setProject()" ng-init="getProjectById()">
<!-- Value to show -->
Show me the add message : {{addMessage}}
<div class="form-group">
<label for="titre">Titre du projet</label>
<input type="text" class="form-control" id="titre" placeholder="Titre">
</div>
<div class="form-group" ng-controller="datepickerpopupCtrl">
<label>Date de début: <em>{{dt | date:'fullDate' }}</em></label>
<p class="input-group">
<input type="text" class="form-control" uib-datepicker-popup="{{format}}" datepicker-options="options" ng-model="dt" is-open="opened" ng-required="true" close-text="Close" alt-input-formats="altInputFormats" show-button-bar="false" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open()"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
<section class="col-md-6 col-lg-3">
<button progress-button="progressFunction()" pb-style="rotate-side-up" class="btn btn-danger">Submit</button>
</section>
</form>
</div>
</div>
</div>
Now the state is loaded perfectly and everything is working fine but when I try to load a variable from the controller in the View it doesn't show.
And I'm loading the scripts in the index page :
<script src="app/pages/projects/projects.modules.js"></script>
<script src="app/pages/projects/projectFactory.js"></script>
<script src="app/pages/projects/ProjectController.js"></script>
<script src="app/pages/projects/add/addProject.html"></script>
P.S: I have an error and I don't know if it's related or not :
projects.html:2 Uncaught SyntaxError: Unexpected token <
P.S: I'm using this BootsTrap template

Related

Access form during component initialization in angularjs

I have a component as following :
.component('myLink', {
bindings: {
linkEntity: '=',
constraints: '=?',
fieldName: '#',
standalone: '#',
adherence: '#',
searchMinLength: '<',
searchHandler: '&',
viewItemHandler: '&',
onSelectItemHandler: '&',
hiddenFields: '#',
formName: '#',
date: '<?',
constraintsJson: '#'
},
require: {
parent: '?^form'
},
templateUrl: 'my-link-component.html',
controller: 'MyLinkController',
controllerAs: 'slink'
});
The template url :
<ng-form name="{{slink.linkFormName}}">
<fieldset class="link-fieldset">
<legend>
<md-icon>link</md-icon>
</legend>
<div layout="row" flex ng-if="slink.isFormLoaded">
<md-button print-remove ng-if="!slink.constraints.readOnly" ng-click="slink.querySearch(' ')" class="md-icon-button md-primary">
<md-icon aria-label="Tout voir">view_headline</md-icon>
<md-tooltip md-direction="right">Afficher toute la liste de : {{slink.uiName | lowercase}}</md-tooltip>
</md-button>
<md-autocomplete flex ng-disabled="slink.constraints.readOnly" md-selected-item="slink.selectedItem" md-search-text="slink.searchText" md-selected-item-change="slink.changeItem(item)" md-items="item in slink.querySearch(slink.searchText)" md-min-length="1" md-no-cache="slink.noCache" md-select-on-match=true md-autoselect=true md-item-text="slink.itemToText(item)" md-input-name="{{slink.property}}" md-input-id="simple-link-component-{{slink.property}}-{{slink.autoId}}-input" md-floating-label="{{slink.floatingLabel}}" md-select-on-focus style="background: none;">
<md-item-template>
<span md-highlight-text="slink.searchText === ' ' ? slink.itemToText(slink.selectedItemStore) : slink.searchText" md-highlight-flags="^i">
{{item.domainObjectDescription}}
</span>
</md-item-template>
<md-not-found>
<div style="width: 100%;">{{slink.notFoundMsg}}
</div>
</md-not-found>
<div ng-messages="slink.errorMessage" ng-if="!slink.constraints.readOnly">
<div ng-messages-include='messages/messages.html'></div>
</div>
</md-autocomplete>
<md-button print-remove ng-if="slink.standalone !== 'list' && !slink.constraints.readOnly" ng-disabled="!slink.selectedItem" class="md-icon-button md-primary" ng-click="slink.viewItem()">
<md-icon aria-label="Voir le détail">visibility</md-icon>
<md-tooltip md-direction="left">Voir le détail de : {{slink.uiName | lowercase}}</md-tooltip>
</md-button>
</div>
</fieldset>
</ng-form>
In the controller I'm trying to access the form as following :
function onInitComponent() {
//...
console.log($scope[slink.linkFormName]);
//...
}
But I always get undefined.
In the other hand, from the changeItem function, which triggers after I made a change on the component it's defined.
How can I access my form when I initilize my component ?
As discussed in this thread you can use $postLink() lifecycle hook to initially access your form in your components controller, since it is called after this controller's element and its children have been linked so we can be sure the form was initialized. See the example below:
(function (angular) {
'use strict';
angular.module('myApp', [])
.controller('MyCtrl', ['$scope', function MyCtrl($scope) {
this.id = 1;
}]);
})(angular);
(function (window, angular) {
'use strict';
var myLink = {
bindings: {
id: '<',
linkFormName: '#'
},
templateUrl: 'my-link-component.tmpl.html',
controller: 'MyLinkController',
controllerAs: 'slink'
};
angular.module('myApp')
.component('myLink', myLink);
})(window, angular);
(function (angular) {
'use strict';
angular
.module('myApp')
.controller('MyLinkController', MyLinkController);
MyLinkController.$inject = ['$scope'];
function MyLinkController($scope) {
var slink = this;
//component lifecycle hooks
slink.$onInit = onInit;
slink.$postLink = postLink;
function onInit() {
console.log('onInit: ', $scope[slink.linkFormName]);
}
function postLink() {
console.log('postLink: ',$scope[slink.linkFormName]);
}
}
})(angular);
<script src="//code.angularjs.org/1.6.2/angular.js"></script>
<div ng-app="myApp">
<div ng-controller="MyCtrl as myCtrl">
<my-link id="myCtrl.id" link-form-name='myLinkForm'></my-link>
</div>
<script type="text/ng-template" id="my-link-component.tmpl.html">
<ng-form name="{{slink.linkFormName}}">
<fieldset class="link-fieldset">
<legend>
<md-icon>link</md-icon>
</legend>
</fieldset>
</ng-form>
</script>
</div>

I can't scope anything onto my angular dialog(reviewForm) from the DialogController?

Below I have a button that is attached to each venue list item. So each list item has its own button. Also, each list item is a object. So when I click one of buttons I need to somehow grab the ID from that specific list item and be able to use it in my dialogcontroller.
<div class="results">
<div class="searchbox col-md-6 form-group">
<input type="text" placeholder="search venues" class="form-control" ng-model="filterTerm">
<ul class="list-unstyled">
<li class="well" ng-repeat="venues in venues | filter: filterTerm">
<h3>{{venues.name}}</h3>
<p>{{venues.info}}</p>
<md-button class="md-primary md-raised" ng-click="showAdvanced($event, venues)" flex-sm="100" flex-md="100" flex-gt-md="auto">Add a Review</md-button>
<button>See Reviews</button>
</li>
</ul>
</div>
My get call to my JSON file. Also, This is my ng-click function that is using mdDialog (which opens a popup window with a reviewForm.html as its content.
$http.get('/getMarkers').success(function(response) {
$scope.venues = response;
console.log($scope.venues);
});
$scope.showAdvanced = function(ev, venues){
$mdDialog.show({
controller: DialogController(ev,venues),
templateUrl: 'views/reviewForm.html',
parent:angular.element(document.body),
targetEvent: ev,
clickOutsideToClose:true
})
};
This is my DialogController which is handling the content(reviewForm.html) that is being rendered in my mdDialog window.
function DialogController($scope, venues, $mdDialog) {
console.log(venues);
$scope.rate = 0;
$scope.max = 5;
$scope.hoveringStaff = function (value) {
$scope.overStar = value;
$scope.percent = 100 * (value / $scope.max);
console.log($scope.overStar);
};
}
This is the html that is going into the dialog
<md-dialog aria-label="Review Form">
{{something}}
<md-toolbar>
{{venues}}
<div class="md-toolbar-tools">
<h2>Review Form</h2>
<span flex></span>
</div>
</md-toolbar>
<md-dialog-content>
{{$scope.something}}
<label>{{something}}Show Attended: </label><input type="text" ng-model="show"><br/>
<label>Date: </label><input type="date" ng-model="date"><br/>
<label>Staff Friendliest: </label><uib-rating ng-model="rate" max="max" on-hover="hoveringStaff(value)" on-leave="overStar = null" titles="['one','two','three']" aria-labelledby="default-rating"></uib-rating><br/>
<label>Sound Quality: </label><input type="text" ng-model="sound"><br/>
<label>Favorite Drink/Cocktail: </label><input type="text" ng-model="drink"><br/>
<label>Nearby Bar/Food Recommendations: </label><input type="text" ng-model="nearby"><br/>
<label>Comments: </label><input type="text" ng-model="comments"><br/>
<label>Venue Rating: </label><br/>
<md-button class="md-raised md-primary" ng-click="sendReview()">Primary</md-button>
</md-dialog-content>
I need the ID because I am going to posting a form to the database and need to add the form content to the selected list item. Sorry if this is confusing, let me know if you have any questions. Thanks!
I think you might need to use locals or resolve to pass objects to the new controllers, because of angular's dependency injection, passing objects to the controller will not work (i.e MyController($scope, a, b)).
ex:
$mdDialog.show({
locals: {
venue: venue
}
});
or with resolve
$mdDialog.show({
resolve: {
venue: function(){return venue;}
}
});
Another issue which I think is a typo, is in the ng-repeat directive venues in venues which should be venue in venues.
Reference the view values to venue object(i.e venue.drink, venue.date, ...ect) instead of $scope, will make it easier to pass it back to the parent controller.
function MainCtrl($http, $scope, $mdDialog) {
/*
$http.get('/getMarkers').success(function(response) {
$scope.venues = response;
console.log($scope.venues);
});
*/
$scope.venues = [{
name: 'Venue #1',
info: 'Info',
date: new Date(),
drink: 'A drink'
}];
$scope.showAdvanced = function(ev, venue) {
$mdDialog.show({
controller: 'DialogController',
template: '<md-dialog aria-label="Review Form">\
{{venue.name}}\
<md-toolbar>\
{{venue}}\
<div class="md-toolbar-tools">\
<h2>Review Form</h2>\
<span flex></span>\
</div>\
</md-toolbar>\
<md-dialog-content>\
{{venue.name}}\
<label>{{venue.name}}Show Attended: </label><input type="text" ng-model="venue.show"><br/>\
<label>Date: </label><input type="date" ng-model="venue.date"><br/>\
<label>Staff Friendliest: </label><uib-rating ng-model="venue.rate" max="max" on-hover="hoveringStaff(value)" on-leave="overStar = null" titles="[\'one\',\'two\',\'three\']" aria-labelledby="default-rating"></uib-rating><br/>\
<label>Sound Quality: </label><input type="text" ng-model="venue.sound"><br/>\
<label>Favorite Drink/Cocktail: </label><input type="text" ng-model="venue.drink"><br/>\
<label>Nearby Bar/Food Recommendations: </label><input type="text" ng-model="venue.nearby"><br/>\
<label>Comments: </label><input type="text" ng-model="venue.comments"><br/>\
<label>Venue Rating: </label><br/>\
<md-button class="md-raised md-primary" ng-click="sendReview()">Primary</md-button>\
</md-dialog-content>',
parent: angular.element(document.body),
targetEvent: ev,
clickOutsideToClose: true,
locals: {
venue: venue
}
})
};
}
function DialogController($scope, venue, $mdDialog) {
$scope.venue = venue;
console.log(venue);
$scope.rate = 0;
$scope.max = 5;
$scope.hoveringStaff = function(value) {
$scope.overStar = value;
$scope.percent = 100 * (value / $scope.max);
console.log($scope.overStar);
};
}
angular.module('MyApp', ['ngAria', 'ngAnimate', 'ngMaterial'])
.controller('MainCtrl', MainCtrl)
.controller('DialogController', DialogController);
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.11.0/angular-material.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.11.0/angular-material.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular-aria.min.js"></script>
</head>
<body ng-app="MyApp" ng-controller="MainCtrl">
<div class="results">
<div class="searchbox col-md-6 form-group">
<input type="text" placeholder="search venues" class="form-control" ng-model="filterTerm">
<ul class="list-unstyled">
<li class="well" ng-repeat="venue in venues | filter: filterTerm">
<h3>{{venue.name}}</h3>
<p>{{venue.info}}</p>
<md-button class="md-primary md-raised" ng-click="showAdvanced($event, venue)" flex-sm="100" flex-md="100" flex-gt-md="auto">Add a Review</md-button>
<button>See Reviews</button>
</li>
</ul>
</div>
</div>
</body>
</html>

How to communicate between two views in ui-router

This is my problem :
I'm using multi-views with ui-router.
My first view corresponds to my base template which includes my form tags :
<form ng-submit="next(myform, test)" name="myform" method="post" role="form">
My second view contains the contents of my form input fields and suitable ng -model.
My third view includes a directive (since this block will be repeated on other pages ) that corresponds to validate my form.
My problem is this, When I Click the submit button that is in my directive I can not retrieve the object of my form, the result returns undefined .
console.log(obj); ---> return undefined
What would be the solution to retrieve the object of my form in my directive ?
Is it possible to integrate the tags in the views ?
Thank you in advance for all your answers
My example : http://plnkr.co/edit/6p0zLTSK5sdV4JOvxDVh?p=preview
Apps.js :
var routerApp = angular.module('routerApp', ['ui.router']);
routerApp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/about');
$stateProvider
.state('about', {
url: '/about',
views: {
'': {
templateUrl: 'partial-about.html'
},
'columnOne#about': {
templateUrl: 'content-form.html',
controller: 'scotchController'
},
'columnTwo#about': {
templateUrl: 'footer-form.html'
}
}
});
});
routerApp.controller('scotchController', function($scope) {
});
routerApp.directive('btnNext', ['$http','$state', function($http,$state) {
/* Controller */
var controllerPagination = function($scope){
var vm = this;
/* Bouton Suivant */
vm.next= function(form,obj) {
console.log(obj);
};
};
/* Template */
var template = '<button type="submit" class="btn bt-sm btn-primary" ng-click="pagination.next(myform.$valid,test)">Suivant</button>';
return {
restrict: 'E',
scope:true,
template: template,
controller: controllerPagination,
controllerAs : 'pagination'
}
}]);
index.html :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://code.angularjs.org/1.2.13/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="routerApp">
<nav class="navbar navbar-inverse" role="navigation">
<ul class="nav navbar-nav">
<li><a ui-sref="about">About</a></li>
</ul>
</nav>
<div class="container">
<div ui-view></div>
</div>
</body>
</html>
partial.about.html :
<h2>myForm</h2>
<div class="row">
<form ng-submit="next(myform, test)" name="myform" method="post" role="form">
<div class="col-sm-12" style="border:1px solid red">
<div ui-view="columnOne"></div>
</div>
<div class="col-sm-12" style="border:1px solid blue">
<div ui-view="columnTwo"></div>
</div>
</form>
</div>
content-form :
<div class="container">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" ng-model="test.email" placeholder="Enter email" required>
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" ng-model="test.password" id="pwd" placeholder="Enter password" required>
</div>
</div>
footer-form.html :
<btn-next></btn-next>
Options are always the same:
shared controller
service
events
IMO the quickest solution here is the shared controller. Change
'': {
templateUrl: 'partial-about.html'
},
'columnOne#about': {
templateUrl: 'content-form.html',
controller: 'scotchController'
}
to
'': {
templateUrl: 'partial-about.html',
controller: 'scotchController as vm'
},
'columnOne#about': {
templateUrl: 'content-form.html'
}
and use vm.test instead of test everywhere. See: http://plnkr.co/edit/za4k0X6XHIk6vsXryPav?p=preview

ui-router $stateProvider.state.controller don't work

The SignupCtrl controller is not binding to signup view. Even when i press the submit button it don't work. But when i place ng-controller=SignupCtrl in the form tag it works. Just wondering why ui-router state parameter controller was not working.
index.html
<html class="no-js" ng-app="mainApp" ng-controller="MainCtrl">
<head> ....
</head>
<body class="home-page">
<div ui-view="header"></div>
<div ui-view="content"></div>
<div ui-view="footer"></div>
...
signup.html
<div class="form-container col-md-5 col-sm-12 col-xs-12">
<form class="signup-form">
<div class="form-group email">
<label class="sr-only" for="signup-email">Your email</label>
<input id="signup-email" type="email" ng-model="user.email" class="form-control login-email" placeholder="Your email">
</div>
<!--//form-group-->
<div class="form-group password">
<label class="sr-only" for="signup-password">Your password</label>
<input id="signup-password" type="password" ng-model="user.password" class="form-control login-password" placeholder="Password">
</div>
<!--//form-group-->
<button type="submit" ng-click="createUser()" class="btn btn-block btn-cta-primary">Sign up</button>
<p class="note">By signing up, you agree to our terms of services and privacy policy.</p>
<p class="lead">Already have an account? <a class="login-link" id="login-link" ui-sref="login">Log in</a>
</p>
</form>
</div><!--//form-container-->
app.js
angular
.module('mainApp', [
'services.config',
'mainApp.signup'
])
.config(['$urlRouterProvider', function($urlRouterProvider){
$urlRouterProvider.otherwise('/');
}])
signup.js
'use strict';
/**
* #ngdoc function
* #name mainApp.signup
* #description
* # SignupCtrl
*/
angular
.module('mainApp.signup', [
'ui.router',
'angular-storage'
])
.config(['$stateProvider', function($stateProvider){
$stateProvider.state('signup',{
url: '/signup',
controller: 'SignupCtrl',
views: {
'header': {
templateUrl: '/pages/templates/nav.html'
},
'content' : {
templateUrl: '/pages/signup/signup.html'
},
'footer' : {
templateUrl: '/pages/templates/footer.html'
}
}
});
}])
.controller( 'SignupCtrl', function SignupController( $scope, $http, store, $state) {
$scope.user = {};
$scope.createUser = function() {
$http({
url: 'http://localhost:3001/users',
method: 'POST',
data: $scope.user
}).then(function(response) {
store.set('jwt', response.data.id_token);
$state.go('home');
}, function(error) {
alert(error.data);
});
}
});
There is a working plunker. Firstly, check this Q & A:
Are there different ways of declaring the controller associated with an Angular UI Router state
Where we can see, that
controller does not belong to state. It belongs to view!
This should be the state definition:
$stateProvider.state('signup',{
url: '/signup',
//controller: 'SignupCtrl',
views: {
'header': {
templateUrl: 'pages/templates/nav.html'
},
'content' : {
templateUrl: 'pages/signup/signup.html',
controller: 'SignupCtrl',
},
'footer' : {
templateUrl: 'pages/templates/footer.html'
}
}
});
Check it here
You need a template to bind a controller.
In the docs ui-router Controllers
Controllers
You can assign a controller to your template. Warning: The controller
will not be instantiated if template is not defined.

AngularJS routing not working after adding second state

I am using the ui.router. First when I just set the home state everything was working fine. But after adding the articles state my routing wouldn't work. I have following angular code:
var app = angular.module('ibrahimsBlog', ['ui.router'])
app.config([
'$stateProvider',
'$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: '/home.html',
controller: 'PrimaryController'
});
.state('articles', {
url: '/articles/{id}',
templateUrl: '/articles.html',
controller: 'ArticlesController'
});
$urlRouterProvider.otherwise('home');
}])
app.factory('articlesFactory', [function(){
var art = { articles: [] };
return art;
}])
app.controller('ArticlesController', [
'$scope',
'$stateParams',
'articlesFactory',
function($scope, $stateParams, articlesFactory){
$scope.article = articlesFactory.articles[$stateParams.id];
}]);
app.controller('PrimaryController', [
// Two Way Data Binding ist nur möglich mit scope Variablen.
'$scope',
'articlesFactory',
function($scope, articlesFactory) {
$scope.articles = articlesFactory.articles;
$scope.articles = [
{ title : 'foo', content : "foo", likes : 5, date : '12/15/2014' },
{ title : 'bar', content : "bar", likes : 2, date : '12/14/2014' },
{ title : 'baz', content : "baz", likes : 4, date : '12/23/2014' }
];
$scope.addArticle = function() {
if(!$scope.title || $scope.title === '') { return; }
$scope.articles.push(
{
title: $scope.title,
content: $scope.content,
likes: 0,
date: '12/15/2014',
comments: [
{ author: 'foo', comment: 'bar', upvotes: 0 }
]
}
);
$scope.title = '';
$scope.content = '';
}
$scope.likeArticle = function(article) {
article.likes += 1;
}
}]);
And here is my html file:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Ibrahims Blog</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="app.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<style> .glyphicon-heart { cursor:pointer } </style>
</head>
<body ng-app="ibrahimsBlog">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<ui-view></ui-view>
<form ng-submit="addArticle()" style="margin-top:30px;">
<h3>Create a new article!</h3>
<div class=form-group">
<input type="text"
placeholder="title"
ng-model="title">
</input>
</div>
<div class="form-group">
<input type="text"
placeholder="content"
ng-model="content">
</input>
</div>
<button type="submit" class="btn btn-primary">Hinzufügen</button>
</form>
<script type="text/ng-template" id="/home.html">
<div class="page-header">
<h1>Ibrahims Blog</h1>
</div>
<span>
Go
</span>
</script>
<script type=text/ng-template" id="/articles.html">
<div class="page-header">
<h3> {{ article.title }} </h3>
</div>
<div ng-repeat="article in articles">
<span class="glyphicon glyphicon-heart"
ng-click="likeArticle(article)"></span>
{{ article.title }} - "{{ article.content }}" - Likes: {{ article.likes }}, Date: {{ article.date }}
</div>
</script>
</div>
</div>
</body>
</html>
Unfortunately everything I receive is following part of the html
<form ng-submit="addArticle()" style="margin-top:30px;">
<h3>Create a new article!</h3>
<div class=form-group">
<input type="text"
placeholder="title"
ng-model="title">
</input>
</div>
<div class="form-group">
<input type="text"
placeholder="content"
ng-model="content">
</input>
</div>
<button type="submit" class="btn btn-primary">Hinzufügen</button>
</form>
Edit
Unfortunately there is still a part which is not working.. When I use the Go button, I see the change of the URL, but it then instant redirects me to the home template. On the server I get a 404 Error. Do you know why this is happening?
I think you have a semi-colon in the wrong place when defining the $stateProvider. You aren't chaining the .state calls properly because the first semi-colon terminates the statement:
$stateProvider
.state('home', {
url: '/home',
templateUrl: '/home.html',
controller: 'PrimaryController'
}); // <-------------------------Remove this semi-colon!
.state('articles', {
url: '/articles/{id}',
templateUrl: '/articles.html',
controller: 'ArticlesController'
});
Like chubbsondubs stated, I had to remove a semicolon. But since that was just a cause for one problem here is the other fault I found later on. In my template in this line
<script type=text/ng-template" id="/articles.html">
The quotation marks were missing! That was the reason for the 404. It should be like this:
<script type="text/ng-template" id="/articles.html">

Resources