如何使用角度ui-router添加新视图

Question

我有一个最近为我重新设计的项目。新代码更清晰，但我不知道如何添加其他视图。我有四个类别，每个类别都有一个html和一个index.js。 index.js文件的代码如下：

var fs = require('fs');
var template = fs.readFileSync(__dirname + '/groups.html', 'utf-8');

module.exports = function(angular) {
  return angular.module('myApp.groups', [])
    .config(['$stateProvider', function($stateProvider) {
        $stateProvider
          .state('groups', {
            url: '/groups',
            template: template,
            controller: 'GroupsCtrl'
          })
           .state('groupsAdd', {
            url: '/groupsAdd',
            views:{
                "groupsAdd":{
                   templateUrl: "groupsAdd.html",
                   controller:"GroupsCtrl"
                 }
              }
        });
     }])
    }])

    .controller('GroupsCtrl', [function() {

    }]);
};

我想从groups.html文件中的按钮发送到名为groupsAdd.html的新页面。我试图在StateProvider中添加groupAdd视图但我显然做错了什么。

apps.js中的路由对我来说非常混乱：

angular.module('myApp', [
  'ui.router',
  require('./views/carriers')(angular).name,
  require('./views/groups')(angular).name,
  require('./views/employees')(angular).name,
  require('./views/products')(angular).name,
  require('./views/user')(angular).name
]).
config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
  $urlRouterProvider.otherwise('/login');
}]);

但我知道答案是在这两个.js文件中！任何帮助或建议都会很棒。感谢。